File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-toolbar |
| styleUrls |
toolbar.component.scss |
| templateUrl |
./toolbar.component.html |
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output
} from '@angular/core';
@Component({
selector: 'app-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToolbarComponent {
@Output() openMenu = new EventEmitter<void>();
@Input() tooltipMsg: string;
}
<md-toolbar color="primary"
class="mat-elevation-z6"
fxLayout>
<button #tooltip="mdTooltip"
[mdTooltip]="tooltipMsg"
md-icon-button
(click)="openMenu.emit()">
<md-icon>
menu
</md-icon>
</button>
<ng-content></ng-content>
</md-toolbar>
Legend
Html element with directive