Ionic에서 bootstrap 사용하기

1. 프로젝트 생성

ionic start ngBootstrapApp blank --type=angular

2. ng-bootstrap 설치

npm i @ng-bootstrap/ng-bootstrap --save

3. bootstrap css 설치

npm install bootstrap

4. angular 9.0.0 및 ng-bootstrp 6.0.0 이상을 사용할 경우 @angular/localize polyfill 설치

ng add @angular/localize

5. 예의상 npm install

6. global.scss에 bootstrap import

@import "~bootstrap/scss/bootstrap";

7. app.module.ts에 NgbModule import

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    NgbModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

8. html에 bootstrap 사용하는 코드 작성

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic ng-bootstrap ^6.1.0
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col size="col-md-8">
        <ion-button fill="outline" color="primary" (click)="selectToday()">Select Today</ion-button>
        <ion-button fill="outline" color="primary" (click)="dp.navigateTo()">To current month</ion-button>
        <ion-button fill="outline" color="primary" (click)="dp.navigateTo({year: 2020, month: 7})">To Jul 2020</ion-button>
       
        <p>Simple datepicker</p>
        <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
      </ion-col>
      <ion-col size="col-md-4" class="ion-padding">
        <pre>Month: {{ date.month }}/{{ date.year }}</pre>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

9. ts file 내용 추가

export class HomePage {

  model: NgbDateStruct;
  date: {year: number, month: number};
  
  constructor(
    private calendar: NgbCalendar
  ) {}

  selectToday() {
    this.model = this.calendar.getToday();
  }
}

10. dp(ngbDatepicker)의 경우 (더 있을 수도 있음...) html의 module에도 NgbModule을 import 해줘야 함

* 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    NgbModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

11. ionic serve를 이용해 실행하면 아래의 화면이 정상적으로 뜬다.

 

[참고]

Template parse errors using ng-bootstrap

How to install bootstrap in Ionic 5

ng-bootstrap