I figured out a problem with twice rendered components when a ng-template
and ngTemplateOutlet
are used. But why?
HTML:
<ng-template #options>
<h3>I'm template</h3>
<sidebar-options></sidebar-options>
</ng-template>
<div class="container-fluid">
<div class="row">
<aside class="order-2">
<ng-container *ngTemplateOutlet="options"></ng-container>
</aside>
<div class="col order-1">CONTENT</div>
</div>
</div>
Component:
import { Component, OnInit, Input, ViewChild, ComponentFactoryResolver, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
@Component({
selector: 'sidebar-options',
templateUrl: './sidebar-options.component.html',
})
export class SidebarOptionsComponent implements OnInit {
@ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;
@Input('types') types: OptionType[];
constructor(private cfr: ComponentFactoryResolver) {}
ngOnInit(): void {
console.log('ini');
}
}
How can I prevent that the SidebarOptionsComponent
is rendered twice?