This Article helps to understand the concept of Content Projection in Angular using ContentChild, ContentChildren (ng-content)
Content Projection in Angular may be performed with ContentChild and ContentChildren.
ContentChild and ContentChildren are property decorators. They are used to query or helps to get a reference to the projected content. Content received by the child component from its parent component is referred to as projected content. Conversely, a parent component utilises ViewChild or ContentChild to gain access to a child component.
ContentChild - Access Child Container
Parent Container - Level 1
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hub',
templateUrl: './hub.component.html',
styleUrls: ['./hub.component.sass']
})
export class HubComponent implements OnInit {
notification: any;
ngOnInit() {
this.notification = 'Notification Works !';
}
}
<p>Hub Worksp>
<div>
<app-notification-container>
<app-notification
[notification]='notification'>app-notification>
app-notification-container>
div>
Child Container - Level 2 (Normal binding)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-notification-container',
templateUrl: './notification-container.component.html',
styleUrls: ['./notification-container.component.sass']
})
export class NotificationContainerComponent implements OnInit {
notificaiton = 'Notification Container Works!';
constructor() { }
ngOnInit() {
}
}
<div>
<h3>{{notificaiton}}h3>
<ng-content select="app-notification">ng-content>
div>
Grand Child Container - Level 3 (Projected as it is in Child Container above using ng-content)
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-notification',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.sass']
})
export class
NotificationComponent
implements OnInit {
@Input() notification: string;
constructor() { }
ngOnInit() {
}
}
Output
Another way of projection (using @ContentChild)
import { Component, OnInit, ContentChild, AfterContentInit } from '@angular/core';
import { NotificationComponent } from '../notification/notification.component';
@Component({
selector: 'app-notification-container',
templateUrl: './notification-container.component.html',
styleUrls: ['./notification-container.component.sass']
})
export class NotificationContainerComponent implements OnInit {
notification = 'Notification Container Works!';
constructor() { }
ngOnInit() {
}
@ContentChild(NotificationComponent) NotificationContentChild: NotificationComponent;
ngAfterContentInit() {
console.log(this.NotificationContentChild);
}
}
Deepak Talwar
