Angular 2. bootstrap 템플릿 적용

localhost:4200

1. bootstrap에서 다운받은 템플릿 적용하기

    - bootstrap에서 다운받은 파일을 보면 html, css, js 등의 파일로 이루어져있습니다.

    - 템플릿 적용하는 방법은 간단합니다. 모든 파일을 workspace에 복사해넣으면 됩니다.

    - 하지만 저는 header, content... 등으로 나누었기 때문에 index.html 파일에 있는 것들을 나눠서 복사해줬습니다.

    - 불필요한 js, img 등은 제거했습니다.

    - css 파일은 수정 없이 적용해줬습니다.

 

 

 

2. js 파일 이벤트 ts로 적용하기

 

    - 템플릿을 보시면 상단의 메뉴 버튼이 있습니다.

    - 버튼을 누르면 메뉴가 숨겨지는 기능인데, 해당 기능은 js 파일로 정의되어 있어 ts 파일로 옮겨주겠습니다.

    - 파일은 js>scripts.js 파일을 보면 되는데, 일반 스크립트 내용으로 되어있습니다.

 

<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!" (click)="sidebarToggleClick($event)"><i class="fas fa-bars"></i></button>

    - header.component.html 파일의 button에 click 이벤트를 추가해줍니다.

 

sidebarToggleClick(event: MouseEvent){
    event.preventDefault();
    document.body.classList.toggle('sb-sidenav-toggled');
}

    - header.component.ts 파일에 이벤트를 추가해줍니다.

    - localhost:4200 에서 버튼 동작이 잘 수행되는지 확인합니다.