How to: Pass data using ng-content

Angular how to pass data using ng-content - free examples & tutorial

Learn how to pass data using ng-content in Angular.

Explanation

To pass data to our object is to use <ng-content> which allows us to render content between the tags. This can be achieved as follows:

1. Update event.component.html with the following code:

        
            
      <ng-content></ng-content>
      
        
    

2. Add some data in between the <app-event></app-event> tags in the app.component.html file:

        
            
      <div class="container">
        <div class="row">
          <div class="col-md-9">
            <app-event>Event 1</app-event>
            <app-event>Event 2</app-event>
          </div>
          <div class="col-md-3">
          </div>
        </div>
      </div>
      
        
    

3. Save the file and run the app