[ANGULAR] 드롭 다운에서 선택한 항목을 표시하도록 NGBDROPDOWN을 구성하는 방법

드롭 다운에서 선택한 항목을 표시하도록 NGBDROPDOWN을 구성하는 방법

해결법

1. ---

   1.이 플러커에서 시연.

   이 플러커에서 시연.

   예제 구성 요소 :

   import {Component} from '@angular/core';
   
   @Component({
     selector: 'dropdown-demo-sortby',
     template: `
       <div ngbDropdown class="d-inline-block">
         <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>{{selectedSortOrder}}</button>
         <div class="dropdown-menu" aria-labelledby="sortMenu">
           <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)" >{{sortOrder}}</button>
         </div>
       </div>
     `
   })
   export class DropdownDemoSortby {
   
     sortOrders: string[] = ["Year", "Title", "Author"];
     selectedSortOrder: string = "Sort by...";
   
     ChangeSortOrder(newSortOrder: string) { 
       this.selectedSortOrder = newSortOrder;
     }
   
   }
   

2. ---

   2.나는 선택한 버튼의 온 클릭 이벤트에 연결하여 이것을 해결했습니다 (블러 이벤트 사용은 Firefox에서 작동하지 않습니다) - Plunkr Demo

   나는 선택한 버튼의 온 클릭 이벤트에 연결하여 이것을 해결했습니다 (블러 이벤트 사용은 Firefox에서 작동하지 않습니다) - Plunkr Demo

   구성 요소 :

   export class NgbdDropdownBasic {
       displayMessage = "Sort by...";
       sortOptions = ["Balance", "Company", "Last Name"]
   
       changeMessage(selectedItem: string){
          this.displayMessage = "Sort by " + selectedItem;
        }
    }
   

   NGBDROPDOW가있는 템플릿 :

    <div ngbDropdown class="d-inline-block">
   
       <button class="btn btn-outline-primary"
               id="dropdownMenu1"
               ngbDropdownToggle >
   
       {{displayMessage}}
   
       </button>
   
       <div class="dropdown-menu" id="options" aria-labelledby="dropdownMenu1">
         <div *ngFor="let option of sortOptions">
           <button class="dropdown-item" 
                   id="option" on-click="changeMessage(option)">{{option}}</button>
   
         </div>
       </div>
     </div>
   

from https://stackoverflow.com/questions/42170566/how-to-configure-ngbdropdown-to-display-the-selected-item-from-the-dropdown by cc-by-sa and MIT license