Angular ng-content Example

Angular ng-content Example

In this post we will give you information about Angular ng-content Example. Hear we will give you detail about Angular ng-content ExampleAnd how to use it also give you demo for it if it is necessary.

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>

Also see:How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8

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:

Also see:Angular Pass Data to Component | Angular Input Component Example


ng serve

you will see layout as bellow:

I hope it can help you…

Hope this code and post will helped you for implement Angular ng-content Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

64  +    =  72

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US