title	permalink
Lesson 303	/project_303

Lesson 303

Async Pipe

Create a service that uses HttpClient to load video data from the API:
```
ng generate service videoData
```
Inject the service into the VideoListComponent and use it to load the video data.
Use the async pipe to unwrap the data in the observable
Use the RxJS map operator in the video data service to transform the video data in some way. For example, you could limit the number of videos, convert the video names to uppercase, or add a new property to each video object.

In your personal project in VS Code

Practice using http
Generate a service in your project with the CLI
Inject http into the service
Do some research on an API that you will use for your project (Google Maps, Openweathermap, etc.)
Make a method with an http.get call to retrieve some basic data from the API
Inject the service into your component
Create a property on your component
In the constructor of the component, call the service method and assign the observable to your property
Use the async pipe in the HTML file to display the data on the screen. You will probably also need the json pipe: myProperty | async | json. Don't forget to put it inside double curly braces (they are omitted since they will not render on the site)
Start laying out your homepage
- Use the wireframes you designed a couple weeks ago
- Put some structure on your page