I'm trying to use @Angular/Material, specifically for the header in my Angular 6 app.
I am basing it off of this example:
Mat-Menu Example
My header component HTML looks like this:
<header role="navigation">
<div id="navbar">
<a href="/dashboard" id="home"><mat-icon>home</mat-icon></a>
<a id="profile" [matMenuTriggerFor]="menu"><mat-icon>person</mat-icon></a>
<mat-menu #menu="matMenu" x-position="above">
<button mat-menu-item (click)="switchAccounts()">
<mat-icon>people</mat-icon>
<span>Switch Account</span>
</button>
<button mat-menu-item (click)="editProfilePage()">
<mat-icon>edit</mat-icon>
<span>Edit Profile</span>
</button>
<button mat-menu-item (click)="logout()">
<mat-icon>power_settings_new</mat-icon>
<span>Log Out</span>
</button>
</mat-menu>
</div>
</header>
Instead of being anchored to the the Profile Link and opening right by it, mat-menu opens and (div with class cdk-overlay-container
) appends to the bottom left corner.
How can I keep the mat-menu at the top of the page right by the link that opened it?