src/lib/default-header/apps-button/apps-button.component.ts
OnInit
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-apps-button |
| imports |
NgOptimizedImage
MatButton
RouterLink
MatAnchor
MatIconButton
MatIcon
IconDirective
|
| styleUrls | ./apps-button.component.scss |
| templateUrl | ./apps-button.component.html |
Properties |
|
Methods |
|
| Public toggle |
toggle()
|
|
Returns :
void
|
| Public Readonly appList |
Default value : computed(() => this.externalAppsService.activeAppList())
|
| Protected Readonly externalAppsService |
Default value : inject(ExternalAppsService)
|
| Public Readonly hasApps |
Default value : computed(() => this.appList().length > 0)
|
| Public Readonly isOpen |
Default value : signal(false)
|
|
The signal that indicates if the app list is open |
import { NgOptimizedImage } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
computed,
inject,
OnInit,
signal,
} from '@angular/core';
import {
MatAnchor,
MatButton,
MatIconButton,
} from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { RouterLink } from '@angular/router';
import { IconDirective } from '@rxap/material-directives/icon';
import { ExternalAppsService } from '../../external-apps.service';
@Component({
selector: 'rxap-apps-button',
templateUrl: './apps-button.component.html',
styleUrls: ['./apps-button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
NgOptimizedImage,
MatButton,
RouterLink,
MatAnchor,
MatIconButton,
MatIcon,
IconDirective,
]
})
export class AppsButtonComponent implements OnInit {
/**
* The signal that indicates if the app list is open
*/
public readonly isOpen = signal(false);
protected readonly externalAppsService = inject(ExternalAppsService);
public readonly appList = computed(() => this.externalAppsService.activeAppList());
public readonly hasApps = computed(() => this.appList().length > 0);
public toggle(): void {
this.isOpen.update(isOpen => !isOpen);
}
public ngOnInit(): void {
this.externalAppsService.getAppList();
}
}
@if (hasApps()) {
<div class="flex flex-row items-center gap-8">
@if (isOpen()) {
<div class="flex flex-row items-center gap-6 h-10">
@for (app of appList(); track app.label) {
@if (app.href) {
<a [href]="app.href" [target]="app.target ?? '_self'" mat-stroked-button>
<span class="flex flex-row items-center gap-4">
@if (app.icon) {
<mat-icon [rxapIcon]="app.icon"></mat-icon>
}
@if (app.image) {
<img [alt]="app.label" [ngSrc]="app.image" height="40" width="40">
}
<span class="label grow-0">{{ app.label }}</span>
</span>
</a>
} @else if (app.routerLink) {
<a mat-stroked-button [routerLink]="app.routerLink">
<span class="flex flex-row items-center gap-4">
@if (app.icon) {
<mat-icon [rxapIcon]="app.icon"></mat-icon>
}
@if (app.image) {
<img [alt]="app.label" [ngSrc]="app.image" height="40" width="40">
}
<span class="label grow-0">{{ app.label }}</span>
</span>
</a>
} @else {
<button mat-stroked-button [disabled]="true">
<span class="flex flex-row items-center gap-4">
@if (app.icon) {
<mat-icon [rxapIcon]="app.icon"></mat-icon>
}
@if (app.image) {
<img [alt]="app.label" [ngSrc]="app.image" height="40" width="40">
}
<span class="label grow-0">{{ app.label }}</span>
</span>
</button>
}
}
</div>
}
<button (click)="toggle()" mat-icon-button>
<mat-icon svgIcon="apps"></mat-icon>
</button>
</div>
}
./apps-button.component.scss