src/lib/window-container-sidenav/window-container-sidenav.component.ts
OnInit
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-window-container-sidenav |
| standalone | true |
| imports |
NgFor
PortalModule
|
| styleUrls | ./window-container-sidenav.component.scss |
| templateUrl | ./window-container-sidenav.component.html |
Properties |
Methods |
|
constructor(service: WindowContainerSidenavService)
|
||||||
|
Parameters :
|
| Public trackBy |
trackBy(index: number, id: string)
|
|
Returns :
string
|
| Public portals |
Default value : new Map<string, ComponentPortal<any>>()
|
| Public Readonly service |
Type : WindowContainerSidenavService
|
Decorators :
@Inject(WindowContainerSidenavService)
|
import {
ChangeDetectionStrategy,
Component,
Inject,
OnDestroy,
OnInit,
} from '@angular/core';
import {
ContainerComponent,
WindowContainerSidenavService,
} from '@rxap/services';
import {
ComponentPortal,
PortalModule,
} from '@angular/cdk/portal';
import { tap } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { NgFor } from '@angular/common';
@Component({
selector: 'rxap-window-container-sidenav',
templateUrl: './window-container-sidenav.component.html',
styleUrls: [ './window-container-sidenav.component.scss' ],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [ NgFor, PortalModule ],
})
export class WindowContainerSidenavComponent implements OnInit, OnDestroy {
public portals = new Map<string, ComponentPortal<any>>();
private subscription = new Subscription();
constructor(
@Inject(WindowContainerSidenavService)
public readonly service: WindowContainerSidenavService,
) {
}
public ngOnInit(): void {
const components = this.service.getAll();
for (const component of components) {
this.add(component);
}
this.subscription.add(this.service.add$.pipe(
tap(component => this.add(component)),
).subscribe());
this.subscription.add(this.service.remove$.pipe(
tap(component => this.remove(component)),
).subscribe());
}
public ngOnDestroy() {
this.subscription.unsubscribe();
}
public trackBy(index: number, id: string) {
return id;
}
private add(component: ContainerComponent) {
if (this.portals.has(component.id)) {
throw new Error(`Component portal with id ${ component.id } already exists`);
}
const portal = new ComponentPortal(
component.component,
component.viewContainerRef,
component.injector,
component.componentFactoryResolver,
);
this.portals.set(component.id, portal);
}
private remove(component: ContainerComponent) {
if (this.portals.has(component.id)) {
const portal = this.portals.get(component.id)!;
this.portals.delete(component.id);
portal.detach();
}
}
}
<div class="flex flex-col gap-4 p-2">
<div *ngFor="let portalId of portals.keys(); trackBy: trackBy" class="grow-0">
<ng-template [cdkPortalOutlet]="portals.get(portalId)"></ng-template>
</div>
</div>
./window-container-sidenav.component.scss