【Angular】プロジェクトへBootstrapの適用方法【忘備録】

Angular プロジェクト作成

> ng new angular-bootstrap

Angular プロジェクトへ移動

> cd angular-bootstrap

Angular プロジェクトへBootstrapのインストール

> npm install --save bootstrap
> npm install --save @ng-bootstrap/ng-bootstrap
> ng add @angular/localize

設定ファイルの書き換え

angular.json

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

app.module.tsへの追記

app.module.ts

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  ...
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
  ],
  ...
})
export class AppModule { }

app.component.htmlの書き換え

app.component.html

<div class="form1">
  <div class="form-group">
    <input 
      type="text" 
      class="form-control"/>
  </div>
  <button 
    class="btn btn-primary">OK</button>
</div>

おしまい！