Template Variable to Interact with Child Components in Angular 2+

I have already discussed in my last couple of blogs to interact Components using @Input and @Output. Here I am going to explain about Template Variable to interact with Child Components. By using this Template reference variable you can access public properties and methods of a child component and also to bind data to a child component.
Template Reference Variable allow you to specify a variable name on a component and you can access any public property or methods on that component using that variable.

In order to demonstrate I have a product card component which is my child component placed inside the  ProductListComponent(parent component) to list some products. You can see I have added a template reference variable named #productReference on this child component

So over here in our ProductCardComponent will just a create a method and property to access from the ProductListComponent

Now you can access this property and method from the ProductListComponent

Load Components Dynamically at runtime in Angular 4

Angular Version I have used – 4.2.0
Here I am going to explain how to load dynamic components at runtime. By using angular ComponentFactoryResolver you can load components dynamically. In the below example I am loading a Image widgets in to tile(nothing but a container div to load the widget at runtime). You can use this feature in order to implement the need of $compile in Angular 1.0

WidgetHostDirective
In order to load a dynamic component you have to create a directive that you can apply to ng-template , which will helps to place the components at run time. This directive injects ViewContainerRef to gain access to the view container of the element that will host the dynamically added component.

import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[widget-host]',
})
export class DashboardTileWidgetHostDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
}

DashboardTileComponent

This is just a place holder component to load the dynamic component.This component accepts an input(contains what component you want to load at runtime)  which is coming from a parent components or you can load from your service based on your implementation. This component is doing the major role to resolve the components at runtime. In this method you can also see a method named renderComponent() which ultimately loads the component name from a service and resolve with ComponentFactoryResolver and finally setting data to the dynamic component.
import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DashboardTileWidgetHostDirective } from './DashbardWidgetHost.Directive';
import { TileModel } from './Tile.Model';
import { WidgetComponentService } from "./WidgetComponent.Service";
@Component({
selector: 'dashboard-tile',
templateUrl: 'app/tile/DashboardTile.Template.html'
})
export class DashboardTileComponent implements OnInit {
@Input() tile: any;
@ViewChild(DashboardTileWidgetHostDirective) widgetHost: DashboardTileWidgetHostDirective;
constructor(private _componentFactoryResolver: ComponentFactoryResolver,private widgetComponentService:WidgetComponentService) {

}
ngOnInit() {

}
ngAfterViewInit() {
this.renderComponents();
}
renderComponents() {
let component=this.widgetComponentService.getComponent(this.tile.componentName);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
let viewContainerRef = this.widgetHost.viewContainerRef;
let componentRef = viewContainerRef.createComponent(componentFactory);
(componentRef.instance).data = this.tile;

}
}
export interface TileModel {
data: any;
}

You can see I have applied the directive we have created before to the ng-template

DashboardTileComponent.html

WidgetComponentService
This is a simple angular service factory to register the component we want to load at runtime

ImageTextWidgetComponent(Component we registered inside the factory loads dynamically )
import { Component, OnInit, Input, ReflectiveInjector, Injector } from '@angular/core';
@Component({
selector: 'imagetextwidget',
templateUrl: 'app/templates/ImageTextWidget.html'
})

export class ImageTextWidgetComponent implements OnInit {
@Input() data: any;
constructor() {

}
ngOnInit() {

}
}

Entry Component

Finally to ensure that the compiler still generates a factory, add dynamically loaded components to the NgModule’s entryComponents array. You can add this in to your app module