Class Container

packages/core/test/acceptance/authoring/signal_inputs_spec.ts:402–433

      `;

      @Component({
        selector: 'app-container',
        encapsulation: ViewEncapsulation.None,
        template: `
          <button (click)="toggle()">{{ state() ? 'Leave' : 'Enter' }}</button>

          <ng-template #template>
            <ng-content></ng-content>
          </ng-template>
        `,
      })
      class Container {
        private readonly viewContainerRef = inject(ViewContainerRef);

        protected readonly template = viewChild.required<TemplateRef<any>>('template');

        protected state = signal<boolean>(false);

        protected toggle() {
          this.state() ? this.destroy() : this.create();
        }

        protected create() {
          this.state.set(true);
          this.viewContainerRef.createEmbeddedView(this.template());
        }

        protected destroy() {
          this.state.set(false);
          this.viewContainerRef.clear();
        }
      }

      @Component({
        selector: 'app-content',