Content Projection in Angular

Tram Ho

In this article, I would like to share a little about Content Projection in Angular .

Content projection allows you to insert an image of the DOM into your component . To put it simply, if you want to insert HTML elements or component into a component , you need to use content projection . In Angular, you can use < ng-content></ng-content> . We have the following GreetComponent component

Now if we want to use GreetComponent in another component and print out a happy message then we will use @Input . According to these, a GreetComponent is modified as follows:

@Input can help us pass in a simple string easily, but what about other data types ?? For example:

  1. Inner HTML
  2. HTML Elements
  3. Styled HTML
  4. Another Component, etc.

At this point let’s think of <ng-content></ng-content> and we have the following modified code:

Now let’s refer to the GreetComponent in AppComponent :

Content Projection in Angular is much different but in this article I just mentioned @Input and <ng-content></ng-content> only. See you at the next post.

Share the news now

Source : Viblo