Componentresolver vs *ngif in angular

See more:

Angular5

Angular6

Below I have created a dynamic component

AppComponent.html

<input type="button" value="One" (click)="setVal('one')">
<input type="button" value="Two" (click)="setVal('two')">
<br>
<app-dynamic-component [key]="keyvalue"></app-dynamic-component>

AppComponent.ts

keyvalue = 'one'

setVal(val) {
    this.keyvalue = val;
}

and its logs the following:

Console log here


----------


And following are using `*ngIf`

AppComponent.html

<input type="button" value="One" (click)="setVal('one')">
<input type="button" value="Two" (click)="setVal('two')">
<br>
<app-component-one *ngIf="keyvalue=='one'"></app-component-one>
<app-component-two *ngIf="keyvalue=='two'"></app-component-two>

AppComponent.ts

keyvalue = 'one'

setVal(val) {
    this.keyvalue = val;
}

and the logs:

Console log here


----------

Both does the same thing of creating and destroying the child components. What is the advantage of using ComponentFactoryResolver over *ngIf and lets say *ngIf gets the job done, should I use ComponentFactoryResolver instead?

What I have tried:

Implemented both, but I am confused about which is the better way.