In this lesson, you will learn how to fetch and render data stored in Contentful content infrastructure in an Angular app

https://app.egghead.io/api/v1/lessons/angular-load-data-from-contentful-in-angular/subtitles

Load Data from Contentful in Angular


Instructor: [00:00] We have here an Angular app bootstrapped using the Angular CLI. Now, let's add the Contentful dependency. We're going to install Contentful dependency. From there, we'll use the Angular CLI to bootstrap a new service. After that, we need to add the credentials to our environment.

[00:34] We'll add an object called Contentful that has a space and access token. To get the credentials, we need to go to Contentful, settings, API keys, and then we can click in the first element in here. We can get our space ID and our delivery token, which is a read-only token.

[01:02] Let's now update our Contentful service. First, we need to import few things -- our environment variable, our createClient function from the Contentful SDK, and the from and map from RxJS.

[01:22] We then need to initialize the client using the createClient, and we get the credentials from the environment variable. From there, we define a get contents method to load the data. We'll get the promise, and then we create an observable from the promise, and then we map the response to the items.

[01:45] Now, let's update our app component. First, we need to import a couple of things -- the observable from RxJS and the Contentful service from our service. We then need to define a lessons observable and inject the Contentful service in the app component. From there, we need to ngOnInit load our lessons.

[02:14] Last thing we need to do is to render this data. Let's delete all of these and replace it with our code. We first check if the lessons exist to render the UL element, and then we loop through the lessons and display just the title.

[02:32] If we save now, we can see our list of lessons rendered. That's how you load the data from Contentful in Angular.

Load Data from Contentful in Angular

Share this video with your friends