Content projection with Angular

Zenab Saleem

Outline

• Overview
• Basic content projection
• ContentChild & ContentChildren
• ViewChild & ViewChildren
  • Life cycle issue
• ViewChild with ElementRef & Renderer

What?

• Create components whose reusable pieces are limited to just the external portions of the component, and the inner pieces could be different based on the needs of the application.
   

• It enables developers to build reusable components.
   

• `ng-content` directive in Angular
   

• In AngularJS 1.x, it is implemented with the infamous transclusion

Why?

• Its ability to change the content inside a component based on the needs of the application.
   

• Reusability is very important when you're programming, and anything we can do to reduce duplication of code is going to help us out.
   

• Content projection is an important concept when developing user interfaces. It allows us to project pieces of content into different places of the user interface of our application

Basic implementation

Use <ng-content></ng-content> directive inside the component to project your content

Projection slots

• Projection on multiple places in a component
• <ng-content select="[DOM query]"></ng-content>

ContentChild & ContentChildren

• To project component
• To access the projected component instance
• Used with ngAfterContentInit

ViewChild & ViewChildren

• The components inside the parent component view
• Used with ngAfterViewInIt

Thank you :)