File

src/lib/window-container-sidenav/window-container-sidenav.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(service: WindowContainerSidenavService)
Parameters :
Name Type Optional
service WindowContainerSidenavService No

Methods

Public trackBy
trackBy(index: number, id: string)
Parameters :
Name Type Optional
index number No
id string No
Returns : string

Properties

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


Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""