Как сделать динамическую ссылку в angular

html компонента, задаем в цикле ссылки, подменяя вторую часть, а host остается всегда одинаковым.

   <div *ngFor="let link of links">
      <a href="{{ host }}{{ link }}" target="_blank">{{ link }}</a>
    </div>

ts компонента, создаем поле host, который ведет на поиск гугла. А в массиве links описываем значение для поиска, который добавится во второй части ссылки

    host = 'https://www.google.com/search?q=';
    links = ['angular', 'javascript'];

Пример на stackblitz

UPD. Для варианта, когда одна ссылка, а выбор идет через кнопки.

<div *ngFor="let link of links">
  <button (click)="activeLink = link">{{ link }}</button>
</div>
<a href="{{ host }}{{ activeLink }}" target="_blank">{{ activeLink }}</a>

ts

  host = 'https://www.google.com/search?q=';

  links = ['angular', 'javascript'];

  activeLink = this.links[0];

Меняем ссылки на кнопки, а при клике в поле activeLink записываем активную кнопку, по умлочанию она равна первому элементу.

Пример на stackblitz