Angular 앱에 Bootstrap을 도입하고 싶습니다.

Bootstrap의 도입에 대해서 조사해 보면 ng-bootstrap 라고 하는 것이 있는 것 같아서 인스톨 해 보았지만, 그 때에 당황했기 때문에 메모

ng-bootstrap 도입

ng-bootstrap은 angular에서 bootstrap을 사용할 수 있도록 하는 라이브러리.
공식 HP: h tps : / / n-Boo tst 등 p. 기주 b. 이오 / # / 칭찬

우선 공식에 기재된 대로 해 본다.

도입 절차

ng-bootstrap 설치

npm install @ng-bootstrap/ng-bootstrap

app.module.ts에 NgbModule 설치

app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

이제 ng-bootstrap을 가져올 수 있으며 angular에서도 Bootstrap을 사용할 수 있습니다.

조속히 시도

공식 샘플을 빌려 Dropdown을 움직여보세요.

app.component.html

<div class="row" style="padding: 40px 10px">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="col text-right">
    <div ngbDropdown placement="top-right" class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>
</div>

그런데 기동하면 화면이 이렇게 되었다.

무엇이 잘못되었는지

설치한 ng-bootstrap의 readme.md를 열어 보면 원인이 밝혀졌습니다.
분명히 Angular에서 bootstrap을 사용하려면 ng-bootstrap만으로는 안되며 bootstrap의 css 파일이 필요하다.
여기에서 readme.md에 설명 된 절차에 따라 bootstrap.css를 Angular에 적용했습니다.

bootstrap 설치

npm install --save bootstrap

angular.json 에 다음을 추가한다

angular.json

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

styles.css로 bootstrap.min.css 가져 오기

styles.css

  @import 'bootstrap/dis/css/bootstrap.min.css'

설정이 끝난 후 재부팅하면 이미지처럼 표시됩니다.

요약

Angular에서 Bootstrap을 사용할 수있게하려면 ng-bootstrap뿐만 아니라 bootstrap.css도 설치해야했습니다.