Dynamic Injection in Angular, injecting a component to parent component

Question

How to inject a component dynamical to another in angular 4 and how to pass the value from parent component to child. Can any one help with Sample working code.

Answer 1

The question is a bit unclear, and definitely will get down votes for lack of any example code for what you have tried, along with lack of details on what you are trying to accomplish.

Basically, a component can be contained within another component using the selector as an HTML element like this:

In parent component:

<div>
   <ai-star [rating]='product.starRating'
            (ratingClicked)='onRatingClicked($event)'>
   </ai-star>
</div>

Child component:

@Component({
    selector: 'ai-star',
    templateUrl: 'app/shared/star.component.html',
    styleUrls: ['app/shared/star.component.css']
})
export class StarComponent implements OnChanges { ... }

You can find the complete sample code here: https://github.com/DeborahK/Angular2-GettingStarted

Answer 2

The dynamic injection of component please see the code here we have to use the ComponentFactoryResolver

let adItem = this.user;
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
    let viewContainerRef = this.injectHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<InjectComponent>componentRef.instance).data = adItem.data;