Render content between the component tags

by

Add <ng-content></ng-content> to the component’s template where the content should be projected:

@Component({
  selector: 'app-demo',
  template: '<div>{{title}}</div>
             <br>
             <ng-content></ng-content>',
})
export class DemoComponent {
  title="Works!";
}

Content to be projected:

<app-demo>This is projected content!</app-demo>

The output will be:

Works!
This is projected content!

Here is a great article about Angular Content Projection (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content

More Related Contents:

  1. Style html,body from web component (Angular 2)
  2. Can’t bind to ‘ng-forOf’ since it isn’t a known native property [duplicate]
  3. Use component from another module
  4. Angular: Cannot find a differ supporting object ‘[object Object]’
  5. How to get reference of the component associated with ElementRef in Angular 2
  6. How to make an angular module to ignore http interceptor added in a core module
  7. Angular 2 restrict input field
  8. async/await in Angular `ngOnInit`
  9. Connect Angular application with ReactJS app?
  10. Emit event from parent to child
  11. Handling 401s globally with Angular
  12. how to embed an angular app into another app?
  13. How to share service between two modules – @NgModule in angular not between to components?
  14. Angular 6 MatTable Performance in 1000 rows
  15. Firestore Getting documents id from collection
  16. How to set unique template reference variables inside an *ngFor? (Angular)
  17. Getting Image from API in Angular 4/5+?
  18. The pipe ‘ ‘ could not be found angular2 custom pipe
  19. Angular 4 HttpClient Query Parameters
  20. fromPromise does not exist on type Observable
  21. Angular2 ngFor OnPush Change Detection with Array Mutations
  22. How to use Bootstrap in an Angular project?
  23. Angular ngClass and click event for toggling class
  24. Angular reactive Form error: Must supply a value for form control with name:
  25. Angular, Http GET with parameter?
  26. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  27. Filtering different columns in a material table
  28. How to set default HTTP header in Angular2?
  29. Angular2 watch for 302 redirect when fetching resource
  30. Response for preflight does not have HTTP ok status in angular

Leave a Comment