Change The Name Of The Dropdown Menu According To Selection In Angular

There is this dropdown menu in my Angular web-application: I want the name of the Dropdown, where currently reads NAMEOFDROPDOWN, to change to whatever is the name of the route th

Solution 1:

Bind a click event to the list elements like:

<lirole="menuitem"><aclass="dropdown-item"routerLink="/first" (click)="changeRoute('First')">First</a></li><lirole="menuitem"><aclass="dropdown-item"routerLink="/second" (click)="changeRoute('Second')">Second</a></li><lirole="menuitem"><aclass="dropdown-item"routerLink="/third" (click)="changeRoute('Third')">Third</a></li>

Then in your component's .ts-file you define a method changeRoute(route) which set's an attribute selectedRoute.

exportclassYourComponent  {
  selectedRoute = "default value";

  changeRoute(route: string) {
    this.selectedRoute = route;
  }
}

and finally you bind the value of your dropdown button to this attribute:

<button dropdownToggle type="button"class="btn btn-primary dropdown-toggle"> 
   {{selectedRoute}}
<span class="caret"></span></button>