What is ng-content?

[Shashidhar Naik]

Please add question & answer about ng-content.

[Sudheer Jonna]

@Shashidharknaik Can you create PR?

[Saheel Ahmed]

Example:

my-button.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-button',
  template: `
    <button class='action-btn' (click)="action()">
      <ng-content></ng-content>
    </button>
  `
})

export class MyButtonComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  action(){
    console.log("action triggered")
  }
}

app.component.html

<my-button>
  Button 1
</my-button>

<my-button>
  Button 2
</my-button>

allows you to add dynamic content inside a custom component.

Using , we can create the same with different labels.

helps us achieve transclusion in Angular.