Angular - bootstrap Modal

 

 

안녕하세요.

 

이번 시간에는 일명 팝업이라고 불리는

 

Modal을 띄워보겠습니다.

 

 

 

 

---

 

 

npm install bootstrap 명령어를 입력하여 부트스트랩을 설치해줍니다.

설치가 완료되면,

 

 

 

 

<div class="pt-4">
  <button class="btn btn-danger" (click)="clickedModal()">모달</button>
</div>

<!-- Modal -->
<div [ngClass]="modal ? 'modal fade show d-block' : 'modal fade'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" (click)="clickedModalClose()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="clickedModalClose()">Close</button>
      </div>
    </div>
  </div>
</div>

 

원하는 템플릿에 이와 같이 작성해 줍니다.

 

 

 

 

 

그리고 연결 된 컴포넌트에 이렇게 적어주면 끝!

 

 

 

 

 

 

 

감사합니다.