Load Data from Contentful in Angular

Khaled Garbaya
InstructorKhaled Garbaya
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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

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.

egghead
egghead
~ 30 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today