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

Duncanhunter - Angular And Ngrx Demo App - StackBlitzStackBlitz

Web Link: Link to the demo app running in StackBlitz