File
|
openWindowSidenav
|
Type : boolean
|
Default value : false
|
|
|
Outputs
|
openWindowSidenavChange
|
Type : EventEmitter
|
|
|
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
} from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { NgIf } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'rxap-toggle-window-sidenav-button',
templateUrl: './toggle-window-sidenav-button.component.html',
styleUrls: [ './toggle-window-sidenav-button.component.scss' ],
changeDetection: ChangeDetectionStrategy.OnPush,
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
class: 'rxap-toggle-window-sidenav-button',
},
standalone: true,
imports: [ MatButtonModule, NgIf, MatIconModule ],
})
export class ToggleWindowSidenavButtonComponent {
@Input()
public openWindowSidenav = false;
@Output()
public openWindowSidenavChange = new EventEmitter<boolean>();
public toggle() {
this.openWindowSidenav = !this.openWindowSidenav;
this.openWindowSidenavChange.emit(this.openWindowSidenav);
}
}
<div class="toggle-button">
<button (click)="toggle()" mat-icon-button>
<ng-template [ngIfElse]="hide" [ngIf]="!openWindowSidenav">
<mat-icon svgIcon="arrow-left-bold"></mat-icon>
</ng-template>
<ng-template #hide>
<mat-icon svgIcon="arrow-right-bold"></mat-icon>
</ng-template>
</button>
</div>
.toggle-button {
position: absolute;
top: 70px;
right: 0;
z-index: 10000;
border-radius: 15px 0px 0px 15px;
border: 1px solid black;
background: black;
}
Legend
Html element with directive