What is NgComponentOutlet in Angular?
Ambroise BAZIE
Posted on September 7, 2023
NgComponentOutlet
is used to instantiate a component type and insert its Host View into the current View.
Things to know
You can control the component creation process by using the attributes below:
-
ngComponentOutletInputs
: Optional component inputs object, which will be bind to the component. -
ngComponentOutletInjector
: Optional custonInject
that will be used as parent for the component. Defaults to the injector of the current view container
Example
<!-- dynamic.component.html -->
<ng-container *ngComponentOutlet="displayedComponent"></ng-container>
<!-- dynamic.component.ts -->
@Component({
// ....
})
export class DynamicComponent implements OnInit {
displayedComponent = EmptyComponent;
showDetail = false;
ngOnInit(): void {
if (this.showDetail) {
this.displayedComponent = ProductDetailComponent
} else {
this.displayedComponent = EmptyComponent
}
}
}
For more details visit the official documentation on Angular.io
💖 💪 🙅 🚩
Ambroise BAZIE
Posted on September 7, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.