What is content projection in Angular and How to use it?

What is a content project in Angular?

Content projection allows you to insert a shadow DOM in your component. To put it simply, if you want to insert HTML elements or other components in a component, then you do that using the concept of content projection. In Angular, you achieve content projection using < ng-content >< /ng-content>{alertInfo}

Angular <ng-content> allows us to inject the content dynamically at runtime.
Let’s consider an example. Assume you want to create a button that can be used in multiple places in your project, and you need to change the button text based on the code placement.

Let’s create a button component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-button',

  template: `
    <button>
      <ng-content></ng-content>
    </button>
  `
})
export class ButtonComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

In the above code ng-content is placeholder for the button text. Component who is using will provide the text and it will replace by the angular framework

For example, I am using the button component in app.component as shown below

<h1>Code Guru</h1>
<app-button>
  Login
</app-button>
<app-button>
  Sign Up
</app-button>

If you run the application, you will see the following output.

DEMO