Content Child decorators in Angular
In this post we will review the Content Child and Content Children decorators in Angular.
Content Child decorator
We can see inside the ng-content by using the View Content decorator at the level of the component.
Also we can use AfterContentInit instead of AfterViewInit to make sure that we are accessing these variables when they are correctly initializated.
app.component.html
1
2
3
<custom-component>
<img alt="My Image" [src]="myImageUrl" #myImage>
</custom-component>
custom-component.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
export class CustomComponent implements AfterContentInit {
@ContentChild('myImage')
image;
constructor () {}
ngAfterContentInit () {
console.log(this.image);
}
}
It’s important to notice that with ContentChild we are restricted to the elements inside ng-content in our custom component.
We can also get an instance of a component passed as content:
app.component.html
1
2
3
<custom-component>
<image-custom-component [src]="imageUrl"></image-custom-component>
</custom-component>
custom-component.component.ts
1
2
3
4
5
6
@ContentChild(ImageCustomComponent)
image: ImageCustomComponent;
ngAfterContentInit () {
console.log(this.image);
}
Similar to View Child we can get the native DOM element of the component:
custom-component.component.ts
1
2
3
4
5
6
@ContentChild(ImageCustomComponent, {read: ElementRef})
image: ElementRef;
ngAfterContentInit () {
console.log(this.image);
}
Content Children decorator
Similar to View Children, we can use Content Children to query multiple elements at the same time.
custom-component.component.ts
1
2
3
4
5
6
@ContentChildren(ImageCustomComponent)
images: QueryList<ImageCustomComponent>;
ngAfterContentInit () {
console.log(this.images);
}
Again, we can get a reference to their native DOM elements:
custom-component.component.ts
1
2
3
4
5
6
@ContentChildren(ImageCustomComponent, {read: ElementRef})
images: QueryList<ElementRef>;
ngAfterContentInit () {
console.log(this.images);
}
Another important thing is that it is not necessary to project the content to access to these components, there could be not ng-content tag inside our CustomComponent, but if there is content passed anyway to it, Content Child and Content Children still will get a reference to these elements.