[Angular] 부트스트랩 적용하기 (ng-bootstrap 사용)

이미지 출처 : Pixabay

지난 글에서 생성한 employee list는 정말 못생겼습니다.

못생김

여기에 Bootstrap.css를 적용해 보겠습니다.

Reference : https://ng-bootstrap.github.io/#/getting-started

Angular powered Bootstrap

일단 npm을 사용하여 bootstrap을 다운로드 해 줍니다.

터미널에 다음과 같이 입력해줍니다.

npm install bootstrap

npm install bootstrap 실행 결과

저는 ng-bootstrap을 사용하겠습니다.

ng-bootstrap을 사용할 경우 bootstrap.js 혹은 jQuery, popper.js 등을 함께 설치하지 않도록 주의하여야 합니다.

 

bootstrap 설치가 완료되었다면 angular.json 파일의 "styles": 부분을 다음과 같이 수정합니다.

angular.json

 

여기까지 완료되었다면 터미널에 다음을 입력하여 ng-bootstrap을 다운로드합니다.

npm install --save @ng-bootstrap/ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap 실행결과

ng-boostrap의 설치가 완료되면 프로젝트의 메인 모듈에 import해 줍니다.

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';	//import THIS!

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeesComponent } from './employees/employees.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule	//import THIS!
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

여기까지 완료되었다면, 기존 <li> 태그를 사용하여 작성한 리스트를 테이블로 재작성합니다.

<!-- employees.component.html -->
<h2>Employees</h2>
<div>
  <table class="table table-striped">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">name</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let employee of employees">
      <th scope="row">{{employee.id}}</th>
      <th scope="row">{{employee.name}}</th>
    </tr>
    </tbody>
  </table>
</div>

 

실행결과

위와 같이 bootstrap.css가 적용된 테이블을 확인할 수 있습니다.