Menu
I could just do
<my-awesome-component *ngIf="ConditionToIncludeComponent"></my-awesome-component>
But every document on inserting component in dom dynamically is based on ViewContainerRef. I like what it does. But what makes it so special over *ngif?
Just point out pros and cons of both. Please. Thanks!
653
ViewContainerReflink. Represents a container where one or more views can be attached to a component.
A TemplateRef represents an <ng-template /> . <ng-template let-name let-date="dateNow">{{date}} - Hello {{name}}!</ng-template> An <ng-template /> itself will not do anything at all. We need a ViewContainerRef to insert the template somewhere.
So in basic terms ngIf is a simple directive that will render in run time by the condition value.
NgIflink. A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause.
If you don't know what component will be used in a component template when putting together this template use viewContainerRef. If you do know the component beforehand but it can sometimes be hidden, use ngIf.
ViewContainerRef is used to specify the insertion point of the dynamic component. When using ngIf you need to specify the component in html in advance. So if you have a spot where you will insert one of three components you will need to do the following:
<my-awesome-component1 *ngIf="ConditionToIncludeComponent1"></my-awesome-component1>
<my-awesome-component2 *ngIf="ConditionToIncludeComponent2"></my-awesome-component2>
<my-awesome-component3 *ngIf="ConditionToIncludeComponent3"></my-awesome-component3>
Whereas with viewContainerRef you need only one spot (usually specified using `ng-container). Using ngComponentOutlet it can be done like this:
template: `<ng-container ngComponentOutlet="componentToInsert"></ng-container>`
class MyComponent {
const myAwesomeComponent1 = cfr.resolveComponentFactory(MyAwesomeComponent1);
const myAwesomeComponent2 = cfr.resolveComponentFactory(MyAwesomeComponent1);
const myAwesomeComponent3 = cfr.resolveComponentFactory(MyAwesomeComponent1);
if (ConditionToIncludeComponent1) {
componentToInsert = myAwesomeComponent1;
else if (ConditionToIncludeComponent2) {
componentToInsert = myAwesomeComponent2;
else if (ConditionToIncludeComponent3) {
componentToInsert = myAwesomeComponent3;
Or component manually using createComponent method:
template: `<ng-container #spot></ng-container>`
class MyComponent {
@ViewChild('spot', {read: ViewContainerRef}) vc;
const myAwesomeComponent1 = cfr.resolveComponentFactory(MyAwesomeComponent1);
const myAwesomeComponent2 = cfr.resolveComponentFactory(MyAwesomeComponent1);
const myAwesomeComponent3 = cfr.resolveComponentFactory(MyAwesomeComponent1);
if (ConditionToIncludeComponent1) {
vc.createComponent(myAwesomeComponent1);
else if (ConditionToIncludeComponent2) {
vc.createComponent(myAwesomeComponent2);
else if (ConditionToIncludeComponent3) {
vc.createComponent(myAwesomeComponent3);
Besides inconvenience and a bloated html template the bigger problem with the ngIf approach is performance impact since three ngIf directives will have to perform some logic on each change detection cycle.
For more information read:
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
