src/lib/header/header.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-header |
| imports |
MatToolbar
MatToolbarRow
CdkPortalOutlet
|
| styleUrls | ./header.component.scss |
| templateUrl | ./header.component.html |
Properties |
|
Inputs |
| color | |
|
Defined in src/lib/header/header.component.ts:29
|
|
| Public Readonly color |
|
Defined in src/lib/header/header.component.ts:29
|
| Public Readonly hasPortals |
Default value : computed(() => this.portals().length > 0)
|
|
Defined in src/lib/header/header.component.ts:34
|
| Protected Readonly headerService |
Default value : inject(HeaderService)
|
|
Defined in src/lib/header/header.component.ts:31
|
| Public Readonly portals |
Default value : computed(() => this.headerService.portals())
|
|
Defined in src/lib/header/header.component.ts:33
|
import { CdkPortalOutlet } from '@angular/cdk/portal';
import {
ChangeDetectionStrategy,
Component,
computed,
inject,
input,
} from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import {
MatToolbar,
MatToolbarRow,
} from '@angular/material/toolbar';
import { HeaderService } from '../header.service';
@Component({
selector: 'rxap-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
MatToolbar,
MatToolbarRow,
CdkPortalOutlet,
]
})
export class HeaderComponent {
public readonly color = input<ThemePalette>();
protected readonly headerService = inject(HeaderService);
public readonly portals = computed(() => this.headerService.portals());
public readonly hasPortals = computed(() => this.portals().length > 0);
}
@if (hasPortals()) {
<mat-toolbar [color]="color()" class="mat-elevation-z1">
@for (portal of portals(); track portal) {
<mat-toolbar-row>
<ng-template [cdkPortalOutlet]="portal"></ng-template>
</mat-toolbar-row>
}
</mat-toolbar>
}
./header.component.scss