File
|
download
|
Type : boolean
|
Default value : false
|
|
|
|
title
|
Type : string
|
Default value : ''
|
|
|
|
tooltipString
|
Type : string
|
Default value : 'Hello'
|
|
|
Outputs
|
closeSideNav
|
Type : EventEmitter
|
|
|
|
downloadFn
|
Type : EventEmitter
|
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-sidenav-header',
templateUrl: './sidenav-header.component.html',
styleUrls: ['./sidenav-header.component.scss'],
})
export class SidenavHeaderComponent {
@Input() title = '';
@Input() download = false;
@Input() tooltipString = 'Hello';
@Output() closeSideNav = new EventEmitter<void>();
@Output() downloadFn = new EventEmitter<void>();
}
<div class="d-flex justify-content-between align-items-center h-100 py-3 mw">
<h4 class="m-0 pt-2 title">{{ title }}</h4>
<div>
<div class="display-option" *ngIf="download" #tooltip="matTooltip" matTooltip="Download">
<button mat-icon-button (click)="downloadFn.emit()" class="mr-2">
<mat-icon>get_app</mat-icon>
</button>
</div>
<div class="display-option">
<button mat-icon-button #tooltip="matTooltip" [matTooltip]="tooltipString" class="mr-2">
<mat-icon class="help-icon">help_outline</mat-icon>
</button>
</div>
<div class="display-option" #tooltip="matTooltip" matTooltip="Close">
<button mat-icon-button (click)="closeSideNav.emit()">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
</div>
<hr class="m-0 mt-1" />
.mw {
min-width: 15.625rem;
}
.display-option {
display: inline-block;
}
.help-icon {
color: grey;
}
.title {
font-weight: 600;
}
Legend
Html element with directive