Issue with Accessing TemplateRef in Angular Component.

Khiko — Mon, 22 Jan 2024 09:34:41 +0000

I'm facing difficulties in accessing TemplateRef in an Angular component. The problem is occuring when I'm using two directives in one ng-container.
Briefly about the work of my library the developer who uses the lib should add his components as TemplateRef(using directive) and i'm saving all templates in my service state. After when lib is starting work I'm adding that templateкуа to lib-component using ViewContainerRef (viewContainer.createEmbeddedView(templateRef)) (until this period everything is OK).
For sometimes I need to periodically update templateRef (there is i'm having trouble). What I'm trying to do i will demonstrate below.

There is how developer adds his templateRef

<div *libTemplate="let pane; named: 'cicdTemplate'">
  <div>
    <app-new-win-settings></app-new-win-settings>
    <button (click)="setDefaultToolbar()">Set Default Toolbar</button>
    CI / CD template
    {{ draggingData | json }}
  </div>
</div>

<div *libTemplate="let pane; named: 'projectsTemplate'">
  <div>
    Projects template
    <button (click)="handleAddToolWindowClick()">Create new Tool Window</button>
  </div>
</div>

The libDirective

@Directive({
  selector: '[libTemplate]',
})
export class LibTemplateDirective implements AfterContentInit, OnDestroy {
  private name: string | undefined;

  /** Stores the name to register this template under */
  @Input()
  public set libTemplateNamed(name: string) {
    this.name = name;
  }

  /**
   * Construct a new pane template directive.
   * @param templateRef injected to be registered with the pane template service
   * @param _viewContainer injected (unused)
   */
  public constructor(
    private readonly templateRef: TemplateRef<any>,
    _viewContainer: ViewContainerRef,
    private templateService: TemplateService,
  ) {}

  /** Register the pane template */
  public ngAfterContentInit(): void {
    if (this.name === undefined) {
      throw new Error(`screen template missing 'named' keyword`);
    }
    this.templateService.add(this.name, { template: this.templateRef });
  }

  /** Attempt to unregister the template */
  public ngOnDestroy(): void {
    if (this.name === undefined) {
      return;
    }
    this.templateService.remove(this.name, { template: this.templateRef });
  }
}

The libComponent

//html

<ng-container omScreenRenderer></ng-container>

//ts

export class LibComponent implements AfterViewInit {
  private _template: any | undefined;

constructor(private templateService: TemplateService) {
templateService.get(name).subscribe((templateRef) =>{
this._template = templateRef
})
}

  ngAfterViewInit(): void {
    this.container.viewContainer.clear();
    if (this._template !== undefined) {
     const viewRef =this.container.viewContainer.createEmbeddedView(this._template);
    }

// there i need periodiaclly update the templateRef
  }
}

Forem: Khiko

Issue with Accessing TemplateRef in Angular Component.