Angular 6 Transclusion Using ng-Content


Angular 6 Transclusion Using ng-Content. In this article, we are looking out the example of ng-content. So in this lesson, we learn how to inject an element. Well, First we need to understand what is Transclusion? Transclusion refers to a content injecting into a specified DOM element. Especially, ng-content work like an injector. So if you wanted to inject content we can use ng-content.

In this example, we are creating this.

ngContent

So before delay let’s check out the example and understand.

Create an App

To create an angular app we need to insert some commands. So following command will make a simple angular CLI app for you.

Angular App Creation

This command will create ngContent app for you.

After that, you will see the angular file hierarchy in front of you. Now you just need to locate the app.component.ts file.

app.component.ts

In this file, we will create two component. we will display both components but these component are combined with each other. So we just inject the second component contained in the first component using ngContent.

Look at the Code we will explain everything.

Code overview.

  • In the above code, we will create another component Content using decorators.
  • We will specify selector to this component.
  • After that, we specify the template selector and create a design. In this design, we inserted a bootstrap container class and in this class, we insert a bold tag and call title property of the component. Then we will specify the <ng-content></ng-content> tag to inject the data of another component.
  • So what is happening here is when you class the first component with is content the second component automatically being called using an <ng-content> tag and add the data of the second component.
  • After we will specify the style selector.
  • Then we create a simple Content class and insert @ContentChild in this class. In the parameter, we will select the content title id and create title property.
  • After this, for the second component which is the app-root component we just take this as it is.

app.component.html

In the app.component.html file, we will create a content for the ng-content tag.

  • In this code, we create a content title using the h2 heading tag.
  • Then create a row and specify margin-top and text center bootstrap class to add margin and center the text.
  • after that, we create three columns of col-md-3 and we add offset to the first column to add some space from left.
  • In these three columns, we insert a <Content> Tag. So whatever you put here was injected in the ng-content tag.
  • In this tag we create  <h6 #title>#1</h6>  h6 heading tag with title id. we already specify this id to @ContentChild annotation and specify the title property to it. Now you can access this h6 heading tag using the title property.
  • We do this for all the properties in all three columns.
  • So we are creating a simple design to show you the best way to use the ngcontent tag.

app.component.css

So if you want to specify some style to the component then you can do this. We will specify the color for the text.

So here we just specify the color for h4 and h6 heading tag.

app.module.ts

At the end don’t forget to add the created component in the module.ts file. If you don’t add this component in this file then nothing will show. So make sure you import this class first.

So here we just import the Content class in the module.ts file and also add the Content in the declaration section also.

That’s it. Our transclusion using ng-content is ready.

I hope you complete all these steps and create this simple tutorial. If you had any error then just comment us. we will solve it out.

Thank you for taking a time to read this article. We will see you in the next lesson.

Leave a Reply

Your email address will not be published. Required fields are marked *