File
Implements
Metadata
| selector |
app-header |
| styleUrls |
header.component.css |
| templateUrl |
./header.component.html |
|
ApplicationName
|
ApplicationName: string
|
Type : string
|
Default value : 'PMS'
|
|
|
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
ApplicationName = 'PMS';
constructor() { }
ngOnInit() {}
}
<mat-toolbar class="example-header" style="z-index:1000;height:90px;">
<div style="text-align:left;width:100%;display:contents">
<span class='brandLogo'>
<img (click)="onLogoClick()" width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</span>
<span>
Welcome to {{ ApplicationName }}!
</span>
<app-menulist></app-menulist>
</div>
</mat-toolbar>
<!-- Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
Legend
Html element with directive