From the course: Angular: API Communication and Authentication

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Using @angular/http to retrieve contacts, part 2

Using @angular/http to retrieve contacts, part 2 - Angular Tutorial

From the course: Angular: API Communication and Authentication

Start my 1-month free trial

Using @angular/http to retrieve contacts, part 2

“

- [Narrator] In our template we can now render a list of contact components using the ngfor directive. Giving each contact object as input to a contact component. This component doesn't exist yet so let's generate it using the angular CLI. We open up our terminal and we can generate an e component using an ng generate component contact. Let's add to that component's html file. We will give each contact a card look using styles from sematic ui. We will need the image and the source property will be set to the photo url property. This operator that you see here tells angular that if contact is null it won't set the source property. This is useful so that we won't start getting any 404's. We also need the content which will hold the name and the address. At the bottom of this card we will display the phone. This will render information from the input to our component. Open up the component file and let's import the same contact interface that we imported previously. This component will…

Contents