Angular 9 Bootstrap kurma

Merhaba Angular üzerinde bootstrap kurulumunu anlatacağım. Angular CLI‘nın en son sürümünü yüklemek için aşağıdaki komutu çalıştırın

$ npm install -g @angular/cli

Önyükleme jQuery ve Popper.js kitaplıklarına bağlıdır ve bunları projenize dahil etmezseniz, JavaScript’e dayanan herhangi bir Bootstrap bileşeni çalışmaz.

$ npm install ngx-bootstrap --save

Daha sonra angular.json dosyasına css ekliyoruz..

   "styles": [  
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
   "styles.css"  
   ],

Hepsi bu kadar şimdi bootstrap js yüklenmediği için ngx-bootstrap indirmiştik. Örnek kullanımını gösteren kod satırını paylaşıyorum.

module.ts içine ekliyoruz

import { AlertModule } from 'ngx-bootstrap/alert';
import { AlertModule } from 'ngx-bootstrap';

@NgModule({
  imports: [AlertModule.forRoot(),...]
})
export class AppModule(){}

Daha sonra html olarak;

<alert type="success">
  <strong>Well done!</strong> You successfully read this important alert message.
</alert>

gibi kullanabiliriz. Diğer bileşenleri de bu şekilde kullanmak mümkün 🙂