0
140
ViewsHow to replace breadcrumb item with the dropdown item dynamically
HI I am trying to create a breadcrumb item using angular. right now it is like this:
so I create a dropdown for the breadcrumb item, what I am struggling to do is:
when I click the item in the dropdown, it will exchange position with the breadcrumb item. In my example, if I click "Geysers del Tatio (Lujo)", it will replace "Geysers del Tatio (Standard)" in breadcrumb view, and "Geysers del Tatio (Standard)" will replace "Geysers del Tatio (Lujo)" in dropdown.
my code share here: https://stackblitz.com/edit/angular-ivy-fbgntk?file=src/app/app.component.html
1 answers
Answer question0
One way to achieve what you want is to maintain a state in your component that tells which "sub" breadcrumb is currently selected, out of a list of all possible options.
export class AppComponent {
public readonly libraryItems = [
'Geysers del Tatio (Standard)',
'Geysers del Tatio (Superior)',
'Geysers del Tatio (Lujo)',
];
public activeItem = this.libraryItems[0];
}
With these in place, you can then render in your component's template the active dropdown item, as well as the list of remaining item selections.
<li class="breadcrumb-item active drop-container">
<a href="#">
<!-- display currently selected dropdown item -->
<span>{{ activeItem }}</span>
<span class="glyphicon glyphicon-triangle-bottom small" aria-hidden="true"></span>
</a>
<div class="drop bg-white">
<ul>
<!-- loop all dropdown items -->
<li *ngFor="let item of libraryItems">
<!-- ...but only render dropdown items that are not active -->
<span *ngIf="item !== activeItem">{{ item }}</span>
</li>
</ul>
</div>
</li>
Finally, to add the behavior of swapping dropdown texts, you can hook that logic when a dropdown item in the selection is clicked, like so:
<!-- in the component template -->
<span *ngIf="item !== activeItem" (click)="activeItem = item">{{ item }}</span>
Here's a working demo: https://stackblitz.com/edit/angular-ivy-xcp3wg?file=src/app/app.component.html