maciejtreder/angular-universal-pwa

<ng-container *ngIf="contextual; else horizontal">
    <button mat-mini-fab [matMenuTriggerFor]="appMenu" class="menu-button open-nav">
        <i class="material-icons">menu</i>
    </button>
    <mat-menu #appMenu="matMenu">
        <ng-container *ngFor="let element of menuElements">
            <a *ngIf="element.link.startsWith('http'); else standard" mat-raised-button target="_blank" rel="noopener" href="{{element.link}}">
                <i class="material-icons">{{element.icon}}</i> {{element.text}}
            </a>
            <ng-template #standard>
                <a mat-raised-button routerLink="{{element.link}}"> <i class="material-icons">{{element.icon}}</i> {{element.text}}</a>
            </ng-template>
        </ng-container>
        <a mat-raised-button (click)="toggleSubscription()" *ngIf="isRegistrationAvailable() | async">
            <i class="material-icons">message</i> {{subscribeText | async}}
        </a>
    </mat-menu>
</ng-container>

<ng-template #horizontal>
    <ul>
        <li *ngFor="let element of menuElements">
            <a *ngIf="element.link.startsWith('http'); else standard" mat-raised-button target="_blank" rel="noopener" href="{{element.link}}">
                <i class="material-icons">{{element.icon}}</i> {{element.text}}
            </a>
            <ng-template #standard>
                <a mat-raised-button routerLink="{{element.link}}"> <i class="material-icons">{{element.icon}}</i> {{element.text}}</a>
            </ng-template>
        </li>
        <li><a mat-raised-button (click)="toggleSubscription()" *ngIf="isRegistrationAvailable() | async">
            <i class="material-icons">message</i> {{subscribeText | async}}
        </a></li>
    </ul>
</ng-template>