Build Angular 14 apps with Contentful headless CMS

In this tutorial, we'll look at how to set up environment variables in Angular 14 and bootstrap for UI styling.

Before we continue, let's add our Contentful Space ID and Access Token to our Angular 14 application's environment variables.

Note: You can create an access token using the Contentful web app or the Content Management API.

Adding environment variables in Angular 14

Open the src/environments.ts file and update it as follows:

export const environment = {
  production: false,
  contentful: {
    spaceId: 'YOUR_SPACE_ID',
    accessToken: 'YOUR_ACCESS_TOKEN'
  }
};

Make sure to replace YOUR_SPACE_ID and YOUR_ACCESS_TOKEN with your actual credentials.

Installing the necessary dependencies

Let's continue by installing some necessary dependencies such as contentful, bootstrap, rich-text-types and rich-text-html-renderer using the following commands after navigating to your project's folder:

npm install contentful bootstrap 
npm install @contentful/rich-text-types @contentful/rich-text-html-renderer

We'll use contentful to connect with Contentful APIs and bootstrap for styling the Angular 14 UI.

Adding Bootstrap to Angular 14

Next, let's add Bootstrap to our project. There are various ways to add Bootstrap to Angular 14, in our case, we'll include bootstrap files via the angular.json file so go ahead and open the configuration file that exists at the root of the project and add the following line:

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
 ]

Add a Bootstrap header bar

Open the src/app/app.component.html file and update it as follows:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <h1>Developers Jobs</h1>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>
<div>
  <router-outlet></router-outlet>
</div>

We simply removed the boilerplate markup except the router outlet and added a Bootstrap header bar.

In the next tutorial, we'll learn how to develop a service for communicating between our Angular 14 app and the headless CMS backend.

• Author: Ahmed Bouchefra Follow @ahmedbouchefra

• Date: 19 Sep 2022