Angular ng-content Example

Let’s talk about what is ng-content in angular? and how to use ng-content in angular?, here we will learn example of angular ng-content select by class. we will see simple example of angular ng-content attribute.

It’s very simple to use with angular 6, angular 7, angular 8 and angular 8 for ng-content.

There is a another solution for reusable components using ng-content. ng-content will help you to create reusable components with your angular application. you can pass data dynamically in your components.

In this example, we will simple create my-card component and we will use ng-content with select by class name. you can also use id or dom element. we will use bootstrap 4 cards with title, content and footer text. we will call our component every where with passing those parameters dynamically. So you can see bellow example with layout.

Let’s follow bellow step to create simple example of ng-content in angular application.

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new appNgContent

Step 2: Create New Component

Here, we will just create new my-card component and use bootstrap card. we also update view file.

ng g component my-card

Let’s update code of my-card.component.ts file.

src/app/my-card/my-card.component.ts

import { Component, OnInit } from '@angular/core';
  
@Component({ 
  selector: 'my-card',
  templateUrl: './my-card.component.html',
  styleUrls: ['./my-card.component.css']
})
export class MyCardComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit() {
  }
 
}

Here, we will use bootstrap 4 cards layout. If you want to also install bootstrap 4 then you can follow this link: Install Bootstrap 4 in Angular App.

Now let’s just update html view file. as bellow:

src/app/my-card/my-card.component.html

<div >
    <div >
        <ng-content select=".header"></ng-content>
    </div>
    <div >
        <ng-content select=".content"></ng-content>
    </div>
    <div >
        <ng-content select=".footer"></ng-content>
    </div>
</div>

Step 3: Use Component

Now use can see how we can call our component with dynamic data.

src/app/app.component.html

<my-card>
  <div >
     Angular ng-content Select by Class Example
  </div>
  <div >
     Let's talk about what is ng-content in angular? and how to use ng-content in angular?, here we will learn example of angular ng-content select by class. we will see simple....
  </div>
  <div >
     Tutorial by ItSolutionStuff.com
  </div>
</my-card>   

Now we are ready to run our example, you can run by following command:

ng serve

you will see layout as bellow:

I hope it can help you…