Projection

Projection is a very important concept in Angular. It enables developers to build reusable components and make applications more scalable and flexible. To illustrate that, suppose we have a ChildComponent like:

@Component({

    selector: 'rio-child',

    template: `

      <div>

        <h4>Child Component</h4>

        {{ childContent }}

      </div>

    `

})

export class ChildComponent {

  childContent = "Default content";

}

What should we do if we want to replace {{ childContent }} to any HTML that provided to ChildComponent? One tempting idea is to define an @Input containing the text, but what if you wanted to provide styled HTML, or other components? Trying to handle this with an @Input can get messy quickly, and this is where content projection comes in. Components by default support projection, and you can use the ngContent directive to place the projected content in your template.

So, change ChildComponent to use projection:

app/child/child.component.ts

import { Component } from '@angular/core';

​

@Component({

  selector: 'rio-child',

  template: `

    <div style="border: 1px solid blue; padding: 1rem;">

      <h4>Child Component</h4>

      <ng-content></ng-content>

    </div>

  `

})

export class ChildComponent {

}

Then, when we use ChildComponent in the template:

app/app.component.html

...

  <rio-child>

    <p>My <i>projected</i> content.</p>

  </rio-child>

...

This is telling Angular, that for any markup that appears between the opening and closing tag of <rio-child>, to place inside of <ng-content></ng-content>.

When doing this, we can have other components, markup, etc projected here and the ChildComponent does not need to know about or care what is being provided.

​View Example​

But what if we have multiple <ng-content></ng-content> and want to specify the position of the projected content to certain ng-content? For example, for the previous ChildComponent, if we want to format the projected content into an extra header and footer section:

app/child-select.component.html

<div style="...">

  <h4>Child Component with Select</h4>

  <div style="...">

    <ng-content select="header"></ng-content>

  </div>

  <div style="...">

    <ng-content select="section"></ng-content>

  </div>

  <div style="...">

    <ng-content select=".class-select"></ng-content>

  </div>

  <div style="...">

    <ng-content select="footer"></ng-content>

  </div>

</div>

Then in the template, we can use directives, say, <header> to specify the position of projected content to the ng-content with select="header":

app/app.component.html

...

<rio-child-select>

  <section>Section Content</section>

  <div class="class-select">

    div with .class-select

  </div>

  <footer>Footer Content</footer>

  <header>Header Content</header>

</rio-child-select>

...

Besides using directives, developers can also select a ng-content through css class:

<ng-content select=".class-select"></ng-content>

app/app.component.html

<div class="class-select">

  div with .class-select

</div>

Accessing Child Components from Template

In our templates, we may find ourselves needing to access values provided by the child components which we use to build our own component.

The most straightforward examples of this may be seen dealing with forms or inputs:

app/app.component.html

<section >

  <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

    <label for="name">Name</label>

    <input type="text" name="name" id="name" ngModel>

    <button type="submit">Submit</button>

  </form>

  Form Value: {{formValue}}

</section>

app/app.component.ts

import { Component } from '@angular/core';

​

@Component({

  selector: 'rio-app',

  templateUrl: 'app/app.component.html'

})

export class AppComponent {

  formValue = JSON.stringify({});

​

  onSubmit (form: NgForm) {

    this.formValue = JSON.stringify(form.value);

  }

}

​View Example​

This isn't a magic feature which only forms or inputs have, but rather a way of referencing the instance of a child component in your template. With that reference, you can then access public properties and methods on that component.

app/app.component.html

<rio-profile #profile></rio-profile>

My name is {{ profile.name }}

app/profile.component.ts

@Component({

  selector: 'rio-profile',

  templateUrl: 'app/profile.component.html'

})

export class ProfileComponent {

  name = 'John Doe';

}

​View Example​

There are other means of accessing and interfacing with child components, but if you simply need to reference properties or methods of a child, this can be a simple and straightforward method of doing so.