9. Create EventListComponent

In this section we will make a EventList presentational component that will show how to use @Input() decorators and pass in data to a child component.

1. Add EventListComponent

  • Add a new presentational component for the event list by running the below command

ng g c event/components/event-list

2. Add @Input for Attendees to the new component

  • Add @Input for attendees being passed in from the parent component.

src/app/event/components/event-list/event-list.component.ts
import { Component, Input } from '@angular/core';
import { Attendee } from '../../../models';

@Component({
  selector: 'app-event-list',
  templateUrl: './event-list.component.html',
  styleUrls: ['./event-list.component.scss']
})
export class EventListComponent {
  @Input()
  attendees: Attendee[];
}

3. Add property binding to app-event-list component selector

  • Add app-event-list selector to EventComponent template.

  • Add property binding to pass into the child component the attendees.

src/app/event/containers/event/event.component.html
<app-add-attendee (addAttendee)="addAttendee($event)"></app-add-attendee>
<app-event-list [attendees]="attendees"></app-event-list>

4. ngFor the attendees on the the page

  • Use an Angular's *ngFor to add attendees to the component template by iterating over the attendees array.

src/app/event/components/event-list/event-list.component.html
<ul>
  <li *ngFor="let attendee of attendees">{{attendee.name}}</li>
</ul>

  • Run the app and add some attendees and they should be passed down and displayed by the EventListComponent.

StackBlitz Link

Previous8. Add test for the event emitterNext10. Test EventListComponent

Last updated