Переход к внешним ссылкам из вложенного меню материалов Angular

Сценарий

у нас есть вложенный mat-menu вот так:

<button mat-menu-item
       [matMenuTriggerFor]="policies">Policies</button>
<mat-menu #policies="matMenu">
    <button mat-menu-item>Privacy Policy</button>
    <button mat-menu-item>Terms of Service</button>
</mat-menu>

И когда пользователь выбирает Terms of Service или Privacy Policy, мы хотим отправить пользователя по этой внешней ссылке.

Подход

Оберните кнопку тегами привязки и используйте target=”_blank” , чтобы открыть ссылку в новой вкладке:

<button mat-menu-item
       [matMenuTriggerFor]="policies">Policies</button>
<mat-menu #policies="matMenu">
    <a href="https://legal.fireflysemantics.com/privacy-policy/"  
       target="_blank">
        <button mat-menu-item>Privacy Policy</button>
    </a>
<a href="https://legal.fireflysemantics.com/terms-of-service/"
   target="_blank">
        <button mat-menu-item>Terms of Service</button>
    </a>
</mat-menu>