File

src/app/components/sidenav-header/sidenav-header.component.ts

Metadata

Index

Inputs
Outputs

Inputs

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" />

./sidenav-header.component.scss

.mw {
  min-width: 15.625rem;
}
.display-option {
  display: inline-block;
}
.help-icon {
  color: grey;
}

.title {
  font-weight: 600;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""