Angular: ngContent – Chethan S Poojary

If you want build a card design and use that card design as wrapper in multiple places you can use it with ngContent method.

Example:

// Component source

@Component({
  selector: 'custom-card',
  template: `
    <div class="card-shadow">
      <ng-content />
    </div>
  `,
})
export class CustomCard {/* ... */}

<!-- Using the component -->
<custom-card>
  <p>This is the projected content</p>
</custom-card>

Result:

<!-- The rendered DOM -->
<custom-card>
  <div class="card-shadow">
    <p>This is the projected content</p>
  </div>
</custom-card>