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.


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:


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 class="col-md-3">

3. Save the file and run the app