This article is a guest post by Chidume Nnamdi. He wrote this blog post through the Write for the Community program. If you are passionate about everything jamstack, open-source or javascript and want to share, join the writer's guild!

This tutorial will leverage two amazing techs, Angular and Strapi, to build a movie app. The primary focus of this tutorial is to learn how we can use Strapi to build APIs and use them from an Angular app.

Read on.

In this tutorial, we will learn about Angular and Strapi.

We will learn how to:

• Scaffold Angular project using the @angular/cli.
• Scaffold Strapi project.
• Create collections and populate them.
• Call the Strapi API endpoints from an Angular app.

What is Strapi?

Strapi is an open-source headless CMS (Content Management system) based on Node.js that makes the designing of APIs very fast and easy. The content of the APIs is self-hosted, customizable, and highly performant. Building backend for your projects just got very easy. With Strapi, there will be no need for endless thought on which stack to use, the database to use as it supports both RESTful and GraphQL APIs.

With Strapi, all you need to do is define your business models, then from there, create your collections and populate the content. Strapi gives you the content on endpoints following best practices.

For example, if we have a blog app and we create a blogPosts collection in Strapi. Strapi will provide us with four endpoints, from which we can get all blog posts, get a particular blog post, edit a specific blog post, and delete a blog post.

POST /blogPosts This adds a blog post to the collection.

PUT /blogPosts/:id This edits a particular blog post via the id parameter. It will select the blog post using the id and edit the post from the payload sent.

DELETE blogPosts/:id This resource finds the blog post from the id and deletes it from the collection.

GET /blogPosts/:id This retrieves a particular blog post from the collection using the id.

So we see how powerful Strapi is, provide your collections, and you have your endpoints. You can then consume them from mobile, web, or desktop. There is no longer a need to set up a backend, and the more amazing thing is that you can deploy the Strapi backend to the cloud and be used in the real world.

Requirements

We will need some tools and software installed before we can be able to run this project.

1
2
3
4
5
- **Node.js** Strapi and Angular all run on Node.js. So we must have Node.js binaries installed on our machine. You can download it from here [Node.js download page](https://nodejs.org/).
- **N.P.M.**: This is the official Node package manager. It comes bundled with the Node.js binaries.
- **Yarn**: Very fast Node package manager. You can install via N.P.M.: `npm i yarn -g`.
- **@angular/cli**: This is a CLI tool from the Angular team to create an Angular project quickly.
- **VS Code**: This is a code editor from Microsoft. It is unarguably the most used code editor in the world. So I prefer you use this because it has enormous support and very good for modern web development. Download it from [here](https://code.visualstudio.com/download).

Scaffolding a Strapi project

We have to create our backend with Strapi. Now, we will scaffold the project using the yarn command.

Let's create a main folder that will contain booth our Strapi backend and the Angular frontend.

1
mkdir movie-ng

This creates a folder movie-ng, now we move into the folder:

1
cd movie-ng

Now, we create a Strapi project:

1
yarn create strapi-app movie-api --quickstart

This creates a movie-API folder, and this is our Strapi backend. Strapi will install the dependencies and start the server for us using the command strapi develop.

The Strapi server will be started at localhost:1337, and the URL localhost:1337/admin will automatically be loaded in our browser by Strapi.

Fill in your details and click on the "LET'S START" button. Strapi will create your account, and the admin U.I. will be loaded.

From this page, we create our collections.

Build the Movie collections

Our Strapi server is up and running. Now, we will build our movie collections.

Our movie model will be like this:

1
2
3
4
5
6
7
8
movie {
    id
    name
    imageUrl
    synopsis
    year
    genre
}

The above model represents the information a movie will have in our app.

• The id is the unique identifier for each movie in our database. Strapi and auto-incremented generate it.
• The name is the title of the movie, e.g., Avengers: Endgame.
• The imageUrl is the image link of the movie's post cover. I did it like this so we won't have to upload an image file binary to our server to save memory space, but I will still demo how to upload files in Strapi.
• The synopsis summarizes a completed screenplay's core concept, major plot points, and main character arcs.
• The year is the year the movie was released.
• The genre is the thematic category of the movie. e.g., it can be a thriller, horror, comedy, etc.

We have seen how a movie model will look like, and now we have to create a movie collection.

Let’s go!

On the admin UI.

Click on + Create new collection type. A modal will pop up on the popup modal, type "movies" in the Display name input box.

These "movies" will be the name of our collection type, and the movie endpoints will be from there.

Click on the Continue button, a modal will appear:

This will be to select field for our "movies" collection. The fields in our movie model will be a "Text" field. So choose the "Text" field on the next U.I. that shows type in "name" and click on + Add another area.

The "Select a field for your collection type" will show for us to select another field. Select "Text," and on the next U.I., type in "imageUrl."

And click on + Add another field. Repeat this process for the synopsis, year, genre fields.

At the genre, field click on the Finish button. The modal will disappear, and we will see the movies displayed with the fields that we have added. On the top right, click on the "Save," this will persist our movie collections to Strapi.

Also, see that at the sidebar that a "Movies" is added there alongside the "Users."

Let's add mock movies data. To do that, click on the "Movies" on the sidebar, a page will open:

This displays the data we have on the Movies collection. Right now, there is no data yet. To add data, click on the + Add New Movies button on the top-right page. Create an entry U.I. will appear; you will see input boxes for all the fields in our movie model.

Add the data below in the corresponding input box:

1
2
3
4
5
Name -> "Avengers: Endgame"
ImageUrl -> "https://terrigen-cdn-dev.marvel.com/content/prod/1x/ae_digital_packshot.jpg"
Synopsis -> "Adrift in space with no food or water, Tony Stark sends a message to Pepper Potts as his oxygen supply starts to dwindle. Meanwhile, the remaining Avengers -- Thor, Black Widow, Captain America, and Bruce Banner -- must figure out a way to bring back their vanquished allies for an epic showdown with Thanos -- the evil demigod who decimated the planet and the universe."
Genre -> "Sci-Fi"
Year -> 2019

After adding them:

Click on the “Save”

Now, the “Publish” button next to it becomes clickable, click on it to make the data live.

Go back to our “Movies” page, you will see our new data listed in the table.

See that it has an id of 1. Let’s add one more movie before we can test. Let’s add Avengers.

Let’s go, click on the “+ Add New Movies” on the “Movies” page.

For Avengers, add this data:

1
2
3
4
5
Name -> “The Avengers”
ImageUrl -> “https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTp0qlAoWcOOswIkL_qpjYzJqCCDmWXiBzCXiqbE43Obo8c0Z-s"
Genre -> Sci-Fi
Year -> 2012
Synopsis -> “When Thor’s evil brother, Loki (Tom Hiddleston), gains access to the unlimited power of the energy cube called the Tesseract, Nick Fury (Samuel L. Jackson), director of S.H.I.E.L.D., initiates a superhero recruitment effort to defeat the unprecedented threat to Earth. Joining Fury’s “dream team” are Iron Man (Robert Downey Jr.), Captain America (Chris Evans), the Hulk (Mark Ruffalo), Thor (Chris Hemsworth), the Black Widow (Scarlett Johansson), and Hawkeye (Jeremy Renner).”

Now, click on “Save”, and then on “Publish”. Move to the “Movies” page, see that this has an id of 2.

We have two movie data added via Strapi admin UI.

Before we test our endpoints, let's make them accessible to the public. Click on "Settings" on the sidebar, then on the page that loads, go to the "USERS & PERMISSIONS PLUGIN" section and click on "Roles" a U.I. appears on the right. Click on "Public." A UI appears, scroll to the "Permissions" section and click on the "Select all" checkbox. This selection will allow any user to perform CRUD operations on the movie's collection.

Next, scroll up and click on the “Save” button.

Let’s test our movie endpoints via Postman.

Test the Movie endpoints using Postman

Make sure you have Postman installed. You can download it from here.

We have movies endpoints:

POST /movies/ PUT /movies/:id GET /movies/:id DELETE /movies/:id GET /movies

Open your Postman, and create a collection, you can name it Movies. Add a new request to it.

Get all movies

Let’s test the GET /movies endpoint, enter localhost:1337/movies in the Enter request URL input box. Then, click on the Send button. You will see all the movies returned.

See that Strapi adds created_at, publishged_at, updated_at fields to hold when the data is created, when the data was made live and when the data was updated respectively.

Get a movie

Let’s retrieve a movie by an id. Let’s get the second movie data, enter localhost:1337/movies/2 in the input box, press "Send".

See that the movie with id 2 is returned.

Add a new movie

Let’s add a new movie using the POST /movies endpoint.

Now, enter localhost:1337/movies, set the HTTP method to POST, click "Body" and select "x-www-form-urlencoded".

Fill out the below fields:

1
2
3
4
5
name -> Avengers: Age of Ultron
imageUrl -> http://www.movienewsletters.net/photos/183976R1.jpg
year -> 2015
genre -> Sci-Fi
synopsis -> When Tony Stark (Robert Downey Jr.) jump-starts a dormant peacekeeping program, things go awry, forcing him, Thor (Chris Hemsworth), the Incredible Hulk (Mark Ruffalo) and the rest of the Avengers to reassemble. As the fate of Earth hangs in the balance, the team is put to the ultimate test as they battle Ultron, a technological terror hell-bent on human extinction. Along the way, they encounter two mysterious and powerful newcomers, Pietro and Wanda Maximoff.

Then, click on “Send”. This will add new movie data to the Strapi.

Looking at the “Movies” page in our Strapi admin, you will see the data there.

Edit a movie

Let’s edit movie data via the /movies/:id PUT.

Let's edit the last movie we added, we will change the name from Avengers: Age of Ultron to The Avengers: Age of Ultron.

Type localhost:1337/movies/4, the 4 there is the id of the movie. Now, change the HTTP method to P.U.T. Then, in the "Body" -> "x-www-form-urlencoded", add a "name" and set the value to the "The Avengers: Age of Ultron". Click on "Send." This will edit the movie's name to "The Avengers: Age of Ultron."

Delete a movie

To delete a movie, we use the DELETE /movies/id endpoint. "let's delete the movie with an id of 4. Type localhost:1337/movies/4 in the input box and change the HTTP method to DELETE, then click on "Send"

This deletes the movie id 4, and only two movies will be in our database. We have successfully tested our Strapi endpoints. Let's build the front end.

Building the Angular

Make sure you have the @angular/CLI installed on your machine. If not, pull it by running this command:

1
npm i @angular/cli -g

Test the installation by checking for the version:

1
2
3
4
$ ng --version
Angular CLI: 11.2.7
Node: 12.17.0
OS: darwin x64

Scaffold Angular project

Now, we create an Angular project using the @angular/cli tool.

1
ng new movie-strapi

This will cause the ng tool to scaffold an Angular project on the movie-strapi folder. It will give you options and select based on how you work, but I use CSS and enable routing.

Our app will have two screens:

Movie list: It will display a list of movies.

Movie view: It will display a movie.

We will break our app into components.

Header: This component will render the header section of our app.

Movielist: This component will render the array of movies. It will fetch the movies and render them in a list.

Movieview: This component will display the details of a particular movie. It will retrieve the movie id from the URL, get the movie from the Strapi backend and display it.

Moviecard: This component renders a summary of a movie. The Movielist component will render this component.

Editmovie: This is a modal component. It will be used to edit a movie.

Addmovie: This is also a modal component. It will be used to add a new movie to the app.

Create the components

Now, we will begin creating the components. We will use the ng g c command to generate Angular components.

Now, we want the template and style of our components to be in line. It means that we don't want any .css and .html files created for the styles and template, respectively. Also, we don't wish to test files to be generated to skip it.

First, move into the movie-strapi folder:

1
cd movie-strapi

Open the app.component.html file and delete the content.

header component

Let’s start with the header component. Run this below command:

1
ng g c header --skip-tests -t -s

The sub-commands:

• --skip-tests: Do not create "spec.ts" test files for the new component.
• --inline-template (-t) Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.
• --inline-style (-s) Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.

The command will create a header folder that will contain header.component.ts file. Now, open the header.component.ts file and paste the below code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-header",
  template: `
    <section class="header">
      <div class="headerName">MovieFlix</div>
    </section>
  `,
  styles: [
    `
      .header {
        height: 40px;
        background-color: black;
        color: white;
        display: flex;
        align-items: center;
        padding: 10px;
        font-family: sans-serif;
      }
      .headerName {
        font-size: 1.8em;
      }
    `,
  ],
})
export class HeaderComponent implements OnInit {
  constructor() {}
  ngOnInit(): void {}
}

The selector app-header is the HTML tag you will use to render this component. It just displays the title of our app MovieFlix.

OK, now open app.component.html and add the code:

1
<app-header></app-header>

This will render our header in all pages/routes.

Now, we need to add the router-outlet></router-outlet> tag in the app.component.html file, because we have routing in our system. The router-outlet tag is when the components of the page we navigate to will be rendered.

1
<app-header></app-header> <router-outlet></router-outlet>

movieview component

Let’s create the movieview component. Run the below command:

1
ng g c movieview --skip-tests -t -s

This will create a movieview folder that will contain movieview.component.ts file.

This will render a particular movie view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import { HttpClient } from "@angular/common/http";
import { ActivatedRoute, Params, Router } from "@angular/router";
import {
  Component,
  OnInit,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
} from "@angular/core";
@Component({
  selector: "app-movieview",
  template: `
    <div class="movieview-container">
      <div class="movieview">
        <div
          class="movieview-image"
          style="background-image: url({{ movie?.imageUrl }});"
        ></div>
        <div class="movieview-details">
          <div class="movieview-name">
            <h1>{{ movie?.name }} ({{ movie?.year }})</h1>
          </div>
          <div style="padding: 5px 0;">
            <span>
              <button
                style="margin-left: 0;"
                class="btn"
                (click)="showEditMovieDialog()"
              >
                Edit
              </button>
              <button class="btn btn-danger" (click)="deleteMovie()">
                Delete
              </button>
            </span>
          </div>
          <div style="padding: 5px 0;">
            <span> Genre: {{ movie?.genre }}</span>
          </div>
          <div style="padding: 5px 0;">
            <span>Year: {{ movie?.year }}</span>
          </div>
          <div class="movieview-synopsis-cnt">
            <h2>Synopsis</h2>
            <div class="movie-synopsis">{{ movie?.synopsis }}</div>
          </div>
        </div>
      </div>
      <ng-container #vcRef></ng-container>
      <ng-template #modalRef>
        <app-editmovie
          (closeDialog)="closeDialog()"
          [movie]="movie"
        ></app-editmovie>
      </ng-template>
    </div>
  `,
  styles: [
    `
      .movieview-container {
        display: flex;
        justify-content: center;
      }
      .movieview {
        display: flex;
        justify-content: center;
        padding: 15px;
        width: 900px;
      }
      .movieview-image {
        height: 500px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin-right: 10px;
        padding-right: 15px;
        flex: 5;
      }
      .movieview-details {
        font-family: system-ui;
        padding-left: 15px;
        flex: 7;
      }
      .movieview-name h1 {
        margin-top: 0;
        border-top: 1px solid;
        border-bottom: 1px solid;
        padding: 10px 0;
      }
      .movieview-synopsis-cnt h2 {
        border-bottom: 1px solid;
        padding-bottom: 4px;
      }
    `,
  ],
})
export class MovieviewComponent implements OnInit {
  movie: any;
  @ViewChild("modalRef") modalRef!: TemplateRef<any>;
  @ViewChild("vcRef", { read: ViewContainerRef }) vcRef!: ViewContainerRef;
  vRef: any = null;
  constructor(
    private activatedRoute: ActivatedRoute,
    private http: HttpClient,
    private router: Router
  ) {}
  ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: Params) => {
      if (params.id) {
        const movieId = params.id;
        this.http
          .get("http://localhost:1337/movies/" + movieId)
          .subscribe((data: any) => (this.movie = data));
      }
    });
  }
  deleteMovie() {
    if (confirm("Do you really want to delete this movie")) {
      this.http
        .delete("http://localhost:1337/movies/" + this.movie?.id)
        .subscribe((data) => {
          this.router.navigate(["/"]);
        });
    }
  }
  showEditMovieDialog() {
    let view = this.modalRef.createEmbeddedView(null);
    this.vcRef.insert(view);
  }
  closeDialog() {
    this.vcRef.clear();
  }
}

We have our design in the template property.

On render, the component uses ActivatedRoute to get the param of the current URL and then retrieve the id param to get the movie's id. Then, we use the HttpClient to call the get() method, and we pass the URL http://localhost:1337/movies/" + this.movie?.id to the method. Then, we subscribe to the Observable it returns to get the data. The data will have the movie data. Once we have the movie data, we set it to the movie property.

This will cause the component to re-render and display the movie details.

See this section in the template:

1
2
3
4
<ng-container #vcRef></ng-container>
<ng-template #modalRef>
  <app-editmovie (closeDialog)="closeDialog()" [movie]="movie"></app-editmovie>
</ng-template>

The ng-template holds the editmovie modal component. The ng-container is where we will render the app-editmovie component.

That’s why we have this:

1
2
@ViewChild("modalRef") modalRef!: TemplateRef<any>;
@ViewChild("vcRef", { read: ViewContainerRef }) vcRef!: ViewContainerRef;

The first code gets the instance of the ng-template and stores it in the modelRef variable. The second code gets the instance of the ng-container and stores it in the vcRef.

The Edit button, when clicked, calls the showEditMovieDialog method.

1
2
3
4
showEditMovieDialog() {
    let view = this.modalRef.createEmbeddedView(null);
    this.vcRef.insert(view);
}

The first line creates a view from the modalRef instance. Then, the second line inserts the created view in the vcRef i.e in the ng-container in the DOM.

This will cause the editmovie modal to show up over all other elements on the page. The Delete button, when clicked, calls the system confirm dialog. If you click on "OK", the movie resource at HTTP DELETE "http://localhost:1337/movies/" + this.movie?.id is called, which deletes the movie from the backend. Then, we use the Router instance router to load the movies page.

The closeDialog method, calls the clear() method on the vcRef instance. The clear() method removes the modalRef from the ng-container, this will cause the editmovie modal to disappear.

movielist component

Here, we will create the movielist component.

1
ng g c movielist --skip-tests -t -s

This will create the movielist component.

Let’s see the code for the movielist component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { HttpClient } from "@angular/common/http";
import {
  Component,
  OnInit,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
} from "@angular/core";
@Component({
  selector: "app-movielist",
  template: `
    <div class="movielist-cnt">
      <div class="movielist-breadcrumb">
        <div>
          <h2>Trending movies</h2>
        </div>
        <div>
          <button
            class="btn"
            style="padding-left: 15px;padding-right: 15px;font-weight: 500;"
            (click)="showAddMovieDialog()"
          >
            Add Movie
          </button>
        </div>
      </div>
      <div class="movielist">
        <app-moviecard
          *ngFor="let movie of movies"
          [movie]="movie"
        ></app-moviecard>
      </div>
      <ng-container #vc></ng-container>
      <ng-template #modal>
        <app-addmovie
          (closeDialog)="closeDialog()"
          (refreshMovies)="fetchMovies()"
        ></app-addmovie>
      </ng-template>
    </div>
  `,
  styles: [
    `
      .movielist {
        display: flex;
        color: grey;
        padding: 15px;
        flex-wrap: wrap;
        padding-top: 0;
      }
      .movielist-breadcrumb {
        font-family: system-ui;
        display: flex;
        justify-content: space-between;
        padding: 32px;
        padding-bottom: 0;
        padding-top: 17px;
      }
      .movielist-breadcrumb h2 {
        margin: 0;
      }
    `,
  ],
})
export class MovielistComponent implements OnInit {
  movies = [];
  @ViewChild("modal") modal!: TemplateRef<any>;
  @ViewChild("vc", { read: ViewContainerRef }) vc!: ViewContainerRef;
  vRef: any = null;
  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.fetchMovies();
  }
  ngAfterViewInit() {
    this.vRef = this.vc;
  }
  fetchMovies() {
    this.http
      .get("http://localhost:1337/movies")
      .subscribe((data: any) => (this.movies = data));
  }
  showAddMovieDialog() {
    let view = this.modal.createEmbeddedView(null);
    this.vRef.insert(view);
  }
  closeDialog() {
    this.vRef.clear();
  }
}

On the initial render of the component, it fetches all movies from the resource [http://localhost:1337/movies](http://localhost:1337/movies.).

It then displays the movies using the *ngFor directive. The app-moviecard is used to display each movie in the iteration:

1
2
3
<div class="movielist">
  <app-moviecard *ngFor="let movie of movies" [movie]="movie"></app-moviecard>
</div>

There is an Add Movie button when clicked it will popup the addmovie modal component.

1
2
3
4
5
6
7
<ng-container #vc></ng-container>
<ng-template #modal>
  <app-addmovie
    (closeDialog)="closeDialog()"
    (refreshMovies)="fetchMovies()"
  ></app-addmovie>
</ng-template>

This is the same thing as we saw in the movieview component.

The closeDialog is passed to the addmovie component so we can close the component from there. The refreshMovies is a function that will be called from the addmovie component, this will cause the movielist component to refresh its movies list when a new movie is added. The refreshMovies points to fetchMovies so the method will be called.

moviecard component Generate the moviecard component. Run the below command:

1
ng g c moviecard --skip-tests -t -s

Let’s see the code for moviecard component.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { Component, Input, OnInit } from "@angular/core";
@Component({
  selector: "app-moviecard",
  template: `
    <div class="movie-card" routerLink="/movie/{{ movie.id }}">
      <div
        class="movie-card-img"
        style="background-image: url({{ movie.imageUrl }});"
      ></div>
      <div class="movie-card-footer">
        <div class="movie-card-name">
          <h3>{{ movie.name }}</h3>
        </div>
        <div class="movie-card-year">
          <span>Year</span><span>{{ movie.year }}</span>
        </div>
        <div class="movie-card-genre">
          <span>Genre:</span><span>{{ movie.genre }}</span>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      .movie-card {
        border: 0px solid;
        width: 251px;
        height: 300px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        margin: 27px;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 1);
      }
      .movie-card:hover {
        box-shadow: 0 20px 36px 0 rgba(0, 0, 0, 0.2);
      }
      .movie-card-footer {
        font-family: system-ui;
        padding: 15px;
        padding-bottom: 18px;
        padding-top: 0;
      }
      .movie-card-img {
        height: 250px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .movie-card-footer {
        border-radius: 5px;
      }
      .movie-card-name {
        color: black;
        font-family: system-ui;
      }
      .movie-card-name h3 {
        margin-bottom: 7px;
        margin-top: 2px;
      }
      .movie-card-year {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        color: darkgray;
        padding: 4px 0;
      }
      .movie-card-genre {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        color: darkgray;
      }
    `,
  ],
})
export class MoviecardComponent implements OnInit {
  @Input() movie: any;
  constructor() {}
  ngOnInit(): void {}
}

This component receives a movie from the movie input. See that it is decorated with the @Input() decorator, this tells Angular that this component will expect an input via the movie channel from the parent component.

The UI just displays the movie’s image, name, genre, and year. See that we set routerLink="/movie/{{ movie.id }}" in the div#movie-card this will cause the card to load the movieview page when the card is clicked. The page will display the full details of the movie.

addmovie component To generate the addmovie component, run the below command:

1
ng g c addmovie --skip-tests -t -s

Let’s see the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { HttpClient } from "@angular/common/http";
import { Component, EventEmitter, OnInit, Output } from "@angular/core";
@Component({
  selector: "app-addmovie",
  template: `
    <div class="modal">
      <div class="modal-backdrop" (click)="closeModal()"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>Add Movie</h3>
          <span style="padding: 10px;cursor: pointer;" (click)="closeModal()"
            >X</span
          >
        </div>
        <div class="modal-body content">
          <div class="inputField">
            <div class="label"><label>Name</label></div>
            <div><input id="addMovieName" type="text" /></div>
          </div>
          <div class="inputField">
            <div class="label"><label>ImageUrl</label></div>
            <div><input id="addMovieImageUrl" type="text" /></div>
          </div>
          <div class="inputField">
            <div class="label"><label>Synopsis</label></div>
            <div><input id="addMovieSynopsis" type="text" /></div>
          </div>
          <div class="inputField">
            <div class="label"><label>Year</label></div>
            <div><input id="addMovieYear" type="text" /></div>
          </div>
          <div class="inputField">
            <div class="label"><label>Genre</label></div>
            <div><input id="addMovieGenre" type="text" /></div>
          </div>
        </div>
        <div class="modal-footer">
          <button (click)="closeModal()">Cancel</button>
          <button
            [disabled]="disable"
            class="btn"
            (click)="addNewMovie($event)"
          >
            Add
          </button>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      .label {
        padding: 4px 0;
        font-size: small;
        color: rgb(51, 55, 64);
      }
      .content {
        display: flex;
        flex-wrap: wrap;
      }
      .inputField {
        margin: 3px 7px;
        flex: 1 40%;
      }
    `,
  ],
})
export class AddmovieComponent implements OnInit {
  @Output() closeDialog = new EventEmitter();
  @Output() refreshMovies = new EventEmitter();
  disable = false;
  constructor(private http: HttpClient) {}
  ngOnInit(): void {}
  addNewMovie(e: Event) {
    this.disable = true;
    const {
      addMovieName,
      addMovieYear,
      addMovieGenre,
      addMovieImageUrl,
      addMovieSynopsis,
    } = window as any;
    this.http
      .post("http://localhost:1337/movies", {
        name: addMovieName.value,
        year: addMovieYear.value,
        synopsis: addMovieSynopsis.value,
        imageUrl: addMovieImageUrl.value,
        genre: addMovieGenre.value,
      })
      .subscribe(
        (data) => {
          this.disable = false;
          this.refreshMovies.emit("");
          this.closeDialog.emit("");
        },
        (err) => {
          this.disable = false;
        }
      );
  }
  closeModal() {
    this.closeDialog.emit("");
  }
}

The input boxes will hold a movie’s model. The “Add” button when clicked will call the addNewMovie method.

The addNewMovie will collect the movie's name, imageUrl, year, genre and synopsis from their input boxes and call the movie resource 'http://localhost:1337/movies' via the HTTP POST method passing them as payload.

On successful execution from the endpoint, the component refreshes the movies in the movielist component and closes itself.

editmovie component Generate editmovie component by running the below command:

1
ng g c editmovie --skip-tests -t -s

See the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { HttpClient } from "@angular/common/http";
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
@Component({
  selector: "app-editmovie",
  template: `
    <div class="modal">
      <div class="modal-backdrop" (click)="closeModal()"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>Edit Movie</h3>
          <span style="padding: 10px;cursor: pointer;" (click)="closeModal()"
            >X</span
          >
        </div>
        <div class="modal-body content">
          <div class="inputField">
            <div class="label"><label>Name</label></div>
            <div>
              <input id="addMovieName" type="text" value="{{ movie?.name }}" />
            </div>
          </div>
          <div class="inputField">
            <div class="label"><label>ImageUrl</label></div>
            <div>
              <input
                id="addMovieImageUrl"
                type="text"
                value="{{ movie?.imageUrl }}"
              />
            </div>
          </div>
          <div class="inputField">
            <div class="label"><label>Synopsis</label></div>
            <div>
              <input
                id="addMovieSynopsis"
                type="text"
                value="{{ movie?.synopsis }}"
              />
            </div>
          </div>
          <div class="inputField">
            <div class="label"><label>Year</label></div>
            <div>
              <input id="addMovieYear" type="text" value="{{ movie?.year }}" />
            </div>
          </div>
          <div class="inputField">
            <div class="label"><label>Genre</label></div>
            <div>
              <input
                id="addMovieGenre"
                type="text"
                value="{{ movie?.genre }}"
              />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button (click)="closeModal()">Cancel</button>
          <button
            [disabled]="disable"
            class="btn"
            (click)="editNewMovie($event)"
          >
            Save
          </button>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      .label {
        padding: 4px 0;
        font-size: small;
        color: rgb(51, 55, 64);
      }
      .content {
        display: flex;
        flex-wrap: wrap;
      }
      .inputField {
        margin: 3px 7px;
        flex: 1 40%;
      }
    `,
  ],
})
export class EditmovieComponent implements OnInit {
  @Output() closeDialog = new EventEmitter();
  @Output() refreshMovies = new EventEmitter();
  @Input() movie: any;
  disable = false;
  constructor(private http: HttpClient) {}
  ngOnInit(): void {}
  editNewMovie(e: Event) {
    this.disable = true;
    const {
      addMovieName,
      addMovieYear,
      addMovieGenre,
      addMovieImageUrl,
      addMovieSynopsis,
    } = window as any;
    this.http
      .put("http://localhost:1337/movies/" + this.movie?.id, {
        name: addMovieName.value,
        year: addMovieYear.value,
        synopsis: addMovieSynopsis.value,
        imageUrl: addMovieImageUrl.value,
        genre: addMovieGenre.value,
      })
      .subscribe(
        (data) => {
          this.disable = false;
          this.closeDialog.emit("");
          window.location.reload();
        },
        (err) => {
          this.disable = false;
        }
      );
  }
  closeModal() {
    this.closeDialog.emit("");
  }
}

Does the same thing as addmovie but this edits a movie.

On initial render, the component gets the movie to edit via its movie input property. It sets the UI input boxes with their corresponding movie property.

The “Save” button calls the editNewMovie($event) method. The method collects the values in the input boxes and calls the movie resource 'http://localhost:1337/movies/' + this.movie?.id passing them as payload. Then, on successful execution on the backend, it closes itself and reloads the page so the edited movie will display the new values.

styles.css We will add our general styling code in the styles.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/* You can add global styles to this file, and also import other style files */
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background-color: rgba(232, 232, 232, 1);
}
button {
  margin-right: 0px;
  margin-left: 1rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  outline: 0px;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn {
  height: 30px;
  padding: 0px 15px 2px;
  font-weight: 600;
  font-size: 1rem;
  line-height: normal;
  border-radius: 2px;
  cursor: pointer;
  outline: 0px;
  background-color: rgb(0, 126, 255);
  border: 1px solid rgb(0, 126, 255);
  color: rgb(255, 255, 255);
}
.btn-danger {
  background-color: red;
  border: 1px solid red;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.modal-backdrop {
  opacity: 0.5;
  width: inherit;
  height: inherit;
  background-color: grey;
  position: fixed;
}
.modal-body {
  padding: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.modal-footer {
  padding: 15px 5px;
  display: flex;
  justify-content: space-between;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin: 0;
}
.modal-content {
  background-color: white;
  z-index: 1;
  padding: 10px;
  margin-top: 10px;
  width: 520px;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
input[type="text"] {
  width: 100%;
  padding: 9px;
  font-weight: 400;
  cursor: text;
  outline: 0px;
  border: 1px solid rgb(227, 233, 243);
  border-radius: 2px;
  color: rgb(51, 55, 64);
  background-color: transparent;
  box-sizing: border-box;
}
input:active {
  border-color: rgb(0, 126, 255);
}

Now, we have fleshed out our components let’s add our routes.

Add routing

We will add routing to our app. We will have two routes:

• /: The base path. It will render the movielist component to display the movies in our system.
• movie/:id: This path will display a particular movie. It will render the movieview component.

Open the app-routing.module.ts, and the code to the routes array.:

1
2
3
4
5
6
7
8
9
10
11
12
...
const routes: Routes = [
  {
    path: "",
    component: MovielistComponent,
  },
  {
    path: "movie/:id",
    component: MovieviewComponent,
  },
];
...

The path "" will load the MovielistComponent when we navigate to localhost:4200 in our browser.

The path "movie/:id" will load the MovieviewComponent when we navigate to localhost:4200/movie/:id in our browser. The id is the id number for the movie. With this, we have set our routes.

We need to add the HttpClientModule in our AppModule this is to make sure we can access the HttpClient from our components.

Open app.module.ts and do the below:

1
2
3
4
5
6
7
8
...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
    ...
  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
  ...
})
export class AppModule {}

Import the HttpClientModule from '@angular/common/http' and add it to the imports array.

We have to run our app.

Run the app

I hope the Strapi backend is still running, if not start it up.

To run the Angular server, type the command below:

1
ng serve

This will serve the Angular app at localhost:4200.

Test the Angular

Now, we will test the Angular to see how it will connect to the Strapi backend. Already we have two movies in our backend, so loading this: localhost:4200 will show the movies:

Let’s add a new movie. Click on the “Add Movie”.

Type in the content:

1
2
3
4
5
Name -> Captain America: The First Avenger
ImageUrl -> http://www.movienewsletters.net/photos/277218R1.jpg
Year ->  2008
Genre -> Sci-Fi
Synopsis -> During World War II, Steve Rogers decides to volunteer in an experiment that transforms his weak body. He must now battle a secret Nazi organization headed by Johann Schmidt to defend his nation.

Click on “Add”. Boom!!

Let’s view the full details. Click on the Captain America: The First Avenger card.

Let’s edit the movie. Click on “Edit”.

Let’s change the imageUrl to this https://m.media-amazon.com/images/M/MV5BMTYzOTc2NzU3N15BMl5BanBnXkFtZTcwNjY3MDE3NQ@@._V1_UY1200_CR69,0,630,1200_AL_.jpg a new image poster, and also we change the name to Captain America I.

Click on “Save”

It changed!! :)

Let’s delete the movie.

Click on “Delete”

Click on “OK”

The Captain America I is gone.

Source code

• Frontend code -Angular
• Backend code- Strapi

Conclusion

We learned a lot in this tutorial. First, we introduced Strapi and learned what it is and the powerful punch it packs. Next, we demonstrated this by building a movie backend and consuming the API endpoints from an Angular app.

See that it took us less time to build our API without the need for starting the backend from scratch or setting up backend tools. It was seamless. We need to call the API endpoints from our frontend app to get the job done.

If you have any questions regarding this or anything I should add, correct, or remove, feel free to submit your comments.