> For the complete documentation index, see [llms.txt](https://duncanhunter.gitbook.io/angular-and-ngrx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://duncanhunter.gitbook.io/angular-and-ngrx/9.-add-eventlistcomponent.md).

# 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.

{% code title="src/app/event/components/event-list/event-list.component.ts" %}

```typescript
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[];
}


```

{% endcode %}

## 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.

{% code title="src/app/event/containers/event/event.component.html" %}

```markup
<app-add-attendee (addAttendee)="addAttendee($event)"></app-add-attendee>
<app-event-list [attendees]="attendees"></app-event-list>

```

{% endcode %}

## 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.

{% code title="src/app/event/components/event-list/event-list.component.html" %}

```markup
<ul>
  <li *ngFor="let attendee of attendees">{{attendee.name}}</li>
</ul>

```

{% endcode %}

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

## StackBlitz Link

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/9-create-event-list-component>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}