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