I'm trying to show the view and clear the same based on the click and dblclick events. On click of the paragraph changing initial background to red from yellow and trying to create view.

On double click changing background to green from red and trying to clear view. I'm able to change the colors but not able to create and clear the view.

Below is my code

html:

<p appBasic [tempref]="basicDirContent">Content of paragraph</p>
<ng-template #basicDirContent>
  <h6>Paragraph content clicked</h6>
</ng-template>

directive

import { Directive, HostListener, HostBinding, ViewContainerRef, TemplateRef, Input } from '@angular/core';

@Directive({
  selector: '[appBasic]'
})
export class BasicDirective  {
  @Input() tempref: TemplateRef<any>;
  
  @HostBinding('style.backgroundColor') bgColor = 'yellow';

  constructor(
    private viewCR: ViewContainerRef
    ) { }


  @HostListener('click') click(e: Event ): void {
    this.bgColor = 'red';
    this.viewCR.createEmbeddedView(this.tempref);
  }
  @HostListener('dblclick') dblclick(e: Event ): void {
    this.bgColor = 'green';
    this.viewCR.clear();
  }
}

Please let me know what is the issue here!!