Become a member
to unlock all features

    Load Data from Contentful in Angular

    Khaled GarbayaKhaled Garbaya

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



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.