![](https://archmond.net/wp-content/uploads/2020/05/image-13.png)
![](https://archmond.net/wp-content/uploads/2020/05/image-14.png)
UI Components 섹션의
![](https://archmond.net/wp-content/uploads/2020/05/image-15.png)
ngx-bootstrap을 클릭
![](https://archmond.net/wp-content/uploads/2020/05/image-16.png)
get started
![](https://archmond.net/wp-content/uploads/2020/05/image-17-1024x505.png)
사용법이 잘 나와 있다. ng add를 사용해 부트스트랩 모듈을 추가 가능.
![](https://archmond.net/wp-content/uploads/2020/05/image-24-1024x374.png)
아래 명령으로 앱 설치
ng add ngx-bootstrap –component buttons
![](https://archmond.net/wp-content/uploads/2020/05/image-23.png)
app.module.ts를 보면 이미 ButtonsModule을 사용할 준비가 되어 있음.(import구문)
![](https://archmond.net/wp-content/uploads/2020/05/image-20.png)
원하는 페이지에 해당 요소 복사
![](https://archmond.net/wp-content/uploads/2020/05/image-22.png)
ts파일에 singleModel을 On으로 초기화하고,
![](https://archmond.net/wp-content/uploads/2020/05/image-21.png)
btnCheckboxTrue에는 True(On)을, btnCheckboxFalse에는 False(Off)을 매칭시킴. 버튼의 라벨은 singleModel을 그대로 출력
![](https://archmond.net/wp-content/uploads/2020/05/image-18.png)
초기 상태
![](https://archmond.net/wp-content/uploads/2020/05/image-19.png)
클릭하면 Off로 바뀜