File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-nav-item |
| styleUrls |
nav-item.component.scss |
| templateUrl |
./nav-item.component.html |
Outputs
activate
|
$event type: EventEmitter<void>
|
|
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { NavItem } from '../../models/nav-item';
@Component({
selector: 'app-nav-item',
templateUrl: './nav-item.component.html',
styleUrls: ['./nav-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NavItemComponent {
@Input() navItem: NavItem;
@Output() activate: EventEmitter<void> = new EventEmitter();
}
<h3 md-subheader *ngIf="navItem.header">
{{ navItem.header }}
</h3>
<a md-list-item [routerLink]="navItem.routerLink"
routerLinkActive="active"
(click)="activate.emit()">
<md-icon md-list-icon>
{{ navItem.icon }}
</md-icon>
<span md-line>
<ng-content></ng-content>
</span>
</a>
<md-divider *ngIf="navItem.showFooter"></md-divider>
Legend
Html element with directive