How to pass custom content to an Angular component?

Let’s assume we want to create a modal window component that we would use for many different screens in our application.

In order to make this component easily re-usable, it would be great to be able to pass some custom content to that modal component, for instance a custom title as well as custom HTML generated from an Angular template.

From a code perspective, this is what we’d like to achieve:

<my-modal-window title=”My custom title”>
      This content comes from the parent component. 
      I want to add some <b>HTML content</b>
      into it with dynamic expressions to display the {{name}}
      of the current user.
</my-modal-window>

The good news is, this is fairly easy to achieve with Angular.

First, in order to pass a title to the component, we can simply use the @Input decorator as follows:

export class ModalWindowComponent {
   @Input()
    title;

Now the value of the title property can be set from a parent component using the syntax highlighted earlier.

Note that we can also use a data binding to make that title dynamic and dependent upon another component property:

<my-modal-window [title]=”dynamicTitle”>

The next step is to update our modal window component template so that it accepts content passed into its body.

This is what was called transclusion in Angular JS. In order to make transclusion happen, all we need to do is add a ng-content directive to our component template:

<div class=”modal-content”>
   <div class=”modal-header”>
     <h2>{{title}}</h2>
   </div>
   <div class=”modal-body”>
      <ng-content></ng-content>
   </div>
</div>

With the above code, any content passed to the modal component will be transcluded (cut and pasted, in a way) in place of ng-content directive.

And that’s really all we have to do. Now our component is ready to get a title and some content from its parent, with the syntax defined earlier:

<my-modal-window title="My custom title">
      This content comes from the parent component. 
      I want to add some <b>HTML content</b>
      into it with dynamic expressions to display the {{name}}
      of the current user.
</my-modal-window>

Want to see an actual example of such a component? Check out my GitHub repository for this exact example of pop-up window.

My Name is Alain Chautard. I am the founding consultant and trainer at Angular Training where I help web development teams learn and become fluent with Angular. Check us out @AngularTraining!

If you enjoyed this article, please recommend and share it! Thanks for your time.