This tutorial continues the previous one, Strapi v4 Authentication and Authorization with Angular 13 on a Quiz App: Part 1 - Strapi App The first tutorial explained setting up a Strapi v4 app to manage questions, quizzes, answers, and scores. The Strapi app would also handle authentication and authorization using its Users and Permissions plugin.

A tutorial titled Build a Quiz App using a Strapi API with Angular preceded part 1. It outlined how to create an Angular 11 quiz app with a Strapi v3 backend. The app displayed a list of quizzes, let users answer questions, and presented their results. It did not track how they performed or allowed them to sign in. This tutorial will build on the initial Angular 11 quiz app.

To start, upgrade the app to the current major version of Angular, v13 (as of the date this was published). Then, add services to handle authentication and scoring. Moreover, you will create a login page, a signup page, and a score list page. The services will interface with the Strapi app you created in part 1 to manage the quiz and score content. The Strapi app will also handle authentication as well as authorization. By the end of the tutorial, users of the quiz app should be able to sign up or log in, see a list of quizzes and attempt them, and see their past scores. Here’s a video showing the completed quiz app in action.

Goals

In this tutorial, you will:

• Upgrade the original quiz app from Angular 11 to 13.
• Add new data and core models to structure scoring and authentication data.
• Add new and modify existing services to manage grading, errors, and authentication.
• Create access restriction guards to prevent unauthenticated access to parts of the app.
• Add new and modify existing support components for error handling and navigation.
• Add new pages and alter existing ones to display scores and handle authentication.

Prerequisites

To follow along, you should have:

• Node.js installed on your local machine. Strapi requires either v12 or v14 of Node.js but recommends v14. Pre-built Node.js installers are available on the Node.js downloads page.
• Angular CLI v13 on your local machine. You will use it to generate parts of the app and run it. You can install the CLI by running the command below: npm install -g @angular/cli@13.1.0
• A fundamental understanding of Angular. The Angular docs are an amazing place to start learning about it.

The Angular App

As mentioned earlier, in this tutorial, you will be building out an existing Angular 11 quiz app built in the “Build a Quiz App using a Strapi API with Angular” tutorial. Clone it from GitHub by running this command on your terminal:

1
    git clone https://github.com/zaracooper/quiz-app

Change the directory to quiz-app to start working on the app:

1
    cd quiz-app

Step 1 - Upgrading the App from Angular 11 to Angular 13

The current major version of Angular is v13. We built the initial quiz app with Angular 11; since v11 is outdated, the app may have vulnerable dependencies. In this step, you will update the app’s Angular core and CLI dependencies. The update involves first updating from v11 to v12, then from v12 to v13. You’ll perform two upgrades because it’s impossible to perform a migration between multiple major versions of Angular. To begin, install the app’s dependencies on your terminal:

1
    npm i

Once the installation is complete, make sure that the repository is clean by committing any changes that result from the dependency installation. Then, run the following command to update Angular core and CLI from v11 to v12 and ng-bootstrap to a version compatible with Angular v12:

1
    npx @angular/cli@12 update @angular/core@12 @angular/cli@12 @ng-bootstrap/ng-bootstrap@10.0.0

You may have to use the --force flag if the update is unable to complete due to Angular CLI failing to resolve some dependencies. Continue the update of Angular core and CLI from v12 to v13 and ng-bootstrap to an Angular-v13-compatible-version by running:

1
    ng update @angular/core@13 @angular/cli@13 @ng-bootstrap/ng-bootstrap@11.0.0

Step 2 - Updating the Environment Variables and Fonts

In this step, you will update the Strapi API URL and how fonts are loaded onto the project. Strapi v4 changed its API URL to include an /api path segment suffix. So the Strapi API environment variable will change from http://localhost:1337 to http://localhost:1337/api. You’ll need to modify this in the src/environments/environment.ts file. Replace the content of that file with:

1
2
3
4
    export const environment = {
      production: false,
      strapiUrl: 'http://localhost:1337/api'
    };

The highlighted portion is what changes. Next, update the fonts used in the app. Begin by removing all the @font-face styling from src/styles.css. After that, **delete all fonts from the src/assets** folder with this command:

1
    rm -rf src/assets/fonts

Then, in the src/index.html file, add these links within the head tag:

1
2
3
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">

Step 3 - Adding New Data and Core Models

In this step, you will add new models to the Core and Data modules. These models are used to structure data from the Strapi app.

• You’ll add a User model that represents a user in the Core module.
• In the Data module, you will remove the UserAnswer model and replace it with an Answer model. This enables it to reflect the a``nswer content type in the Strapi app accurately.
• Then, you’ll add a ScoreResponse model to reflect the responses you get from the Strapi Score API.
• Lastly, you’ll modify the existing Quiz, Question, and Score models to match their corresponding content types on Strapi.

To begin, create the new models and delete the old ones. If you are currently running the Angular server, it may stop working because of the changes you’ll make. Run the following commands on your terminal:

1
2
3
4
    ng generate interface core/models/user
    ng generate interface data/models/answer
    ng generate interface data/models/score-response
    rm src/app/data/models/user-answer.ts

The highlighted portions of the code blocks below indicate the updates made to the existing models.

Add this to src/app/core/models/user.ts:

1
2
3
4
5
    export interface User {
        id: string,
        username: string,
        email: string
    }

Add this to src/app/data/models/answer.ts:

1
2
3
4
5
6
7
8
9
    import { Question } from "./question";
    
    export interface Answer {
        id?: number;
        question: Question;
        value: string;
        correct?: boolean;
        correctValue?: string;
    }

Update src/app/data/models/question.ts using the code below:

1
2
3
4
5
6
7
8
9
    export interface Question {
        id: number;
        text?: string;
        a?: string;
        b?: string;
        c?: string;
        d?: string;
        answer?: string;
    }

Update src/app/data/models/quiz.ts with the code below:

1
2
3
4
5
6
7
8
    import { Question } from "./question";
    
    export interface Quiz {
        id: number;
        title?: string;
        description?: string;
        questions?: Question[];
    }

Add the following code to src/app/data/models/score-response.ts:

1
2
3
4
5
6
7
8
9
    import { Quiz } from "./quiz";
    import { Score } from "./score";
    
    export interface ScoreResponse {
        questionCount: number;
        quiz: Quiz;
        score: Score;
        scoreTotal: number;
    }

Update src/app/data/models/score.ts with the following code:

1
2
3
4
5
6
7
8
9
    import { Answer } from "./answer";
    import { Quiz } from "./quiz";
    
    export interface Score {
        id: number;
        answers: Answer[];
        createdAt: Date;
        quiz?: Quiz;
    }

Step 4 - Add New and Update Existing Core and Data Module Services

In this step, you will add new services and update existing ones.

A. Core Module Services

The Core module currently has no services. Add the three services outlined below to it:

• An Authentication service: It is responsible for user signup, login, and logout and fetching user data and authentication credentials.
• A Storage service that interfaces with local storage: It is primarily used for persisting session data. Session management is outside the purview of this article, so this service is a simpler, improvised, and less secure solution to persisting a session for the sake of this tutorial. It is not advisable to store credentials in local storage as it is susceptible to Cross-Site Scripting.
• A Toast service: It displays toast messages to the user and will mostly show login or signup notifications.

To generate these new services run the command below:

1
    for service in authentication storage toast; do ng generate service "core/services/${service}"; done

1. The Storage Service

This service interfaces with local storage. It adds a namespace prefix to each key name that’s used. Add the code below to src/app/core/services/storage.service.ts:

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
    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class StorageService {
      private namespace = "s";
    
      constructor() { }
    
      getItem(key: string): string | null {
        return window.localStorage.getItem(`${this.namespace}_${key}`);
      }
    
      setItem(key: string, value: string) {
        window.localStorage.setItem(`${this.namespace}_${key}`, value);
      }
    
      removeItem(key: string) {
        window.localStorage.removeItem(`${this.namespace}_${key}`);
      }
    
      clear() {
        window.localStorage.clear();
      }
    }

The storage service has four methods:

• getItem to get values from local storage.
• setItem to add values to local storage.
• removeItem to remove items from local storage.
• clear to clear the content of local storage.

2. The Toast service

This service shows toast messages. A toast component which you will create in a later step will use this service to manage messages, titles, and styling options for the notifications it shows. Add this code to src/app/core/services/toast.service.ts:

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
    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class ToastService {
      toasts: any[] = [];
    
      constructor() { }
    
      show(text: string, options: any = {}) {
        this.toasts.push({ text, ...options });
      }
    
      showDanger(text: string, options: any = {}) {
        this.toasts.push({text, classname: 'bg-danger text-light', header: 'Error', ...options});
      }
    
      showWarning(text: string, options: any = {}) {
        this.toasts.push({text, classname: 'bg-warning text-dark', header: 'Warning', ...options});
      }
    
      showSuccess(text: string, options: any = {}) {
        this.toasts.push({text, classname: 'bg-success text-light', header: 'Success', ...options});
      }
    
      showPrimary(text: string, options: any = {}) {
        this.toasts.push({text, classname: 'bg-primary text-light', ...options});
      }
    
      showInfo(text: string, options: any = {}) {
        this.toasts.push({text, classname: 'bg-info text-light', header: 'Info', ...options});
      }
    
      showDark(text: string, options: any = {}) {
        this.toasts.push({text, classname: 'bg-dark text-light', ...options});
      }
    }

The Toast service has seven methods:

• show to display generic toast messages
• showDanger to display danger toast messages
• showWarning to display warning toast messages
• showSuccess to display success toast messages
• showPrimary to display primary toast messages
• showInfo to display informational toast messages
• showDark to display toast messages styled in a dark theme

3. The Authentication service

This service is responsible for authentication. In src/app/core/services/authentication.service.ts, add this 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
    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { BehaviorSubject } from 'rxjs';
    import { environment } from 'src/environments/environment';
    import { User } from '../models/user';
    import { StorageService } from './storage.service';
    
    interface AuthResponse {
      jwt: string;
      user: User;
    }
    
    @Injectable({
      providedIn: 'root'
    })
    export class AuthenticationService {
      private url = `${environment.strapiUrl}/auth/local`;
      private loginTracker = new BehaviorSubject(this.checkIfLoggedIn());
    
      loggedInStatus$ = this.loginTracker.asObservable();
    
      constructor(private http: HttpClient, private ss: StorageService) { }
    
      login(identifier: string, password: string) {
        return this.http.post<AuthResponse>(this.url, { identifier, password });
      }
    
      register(username: string, email: string, password: string) {
        return this.http.post<AuthResponse>(`${this.url}/register`, { username, email, password });
      }
    
      checkIfLoggedIn() {
        return this.ss.getItem('loggedIn') === 'true';
      }
    
      persistUser(resp: AuthResponse) {
        [
          ['userId', resp.user.id],
          ['userEmail', resp.user.email],
          ['username', resp.user.username],
          ['loggedIn', 'true'],
          ['token', resp.jwt]
        ].forEach(item => this.ss.setItem(item[0], item[1]));
        this.loginTracker.next(true);
      }
    
      getPersistedUser(): User {
        return {
          id: this.ss.getItem('userId') || '',
          username: this.ss.getItem('username') || '',
          email: this.ss.getItem('userEmail') || ''
        };
      }
    
      getPersistedToken(): string {
        return this.ss.getItem('token') || '';
      }
    
      logout() {
        ['userId', 'userEmail', 'username', 'loggedIn', 'token'].forEach(item => this.ss.removeItem(item));
        this.loginTracker.next(false);
      }
    
      getAuthHeader() {
        return {
          headers: { 'Authorization': `Bearer ${this.getPersistedToken()}` }
        };
      };
    }

The Authentication service has eight methods:

• login : It takes an identifier (email) and password and makes a POST request to the /auth/local endpoint of the Strapi app to login a user. It returns the user’s information and a JWT if successful.
• register: It signs up a user. It takes a username, email, and password, makes a POST request to the Strapi /auth/local endpoint, and returns the new user’s information and a JWT.
• checkLoggedIn: It checks whether the user is logged in based on a value stored in local storage that is set when they log in.
• persistUser: It saves user information using the Storage service when they log in and updates their login status through the loginTracker.
• getPersistedUser: This method gets the current user’s information from the Storage service.
• getPersistedToken: It gets the user’s token from the Storage service.
• logout: This method logs out the user by clearing their information from storage and updates their login status using loginTracker.
• getAuthHeader: It creates an authentication header using the persisted token to use in requests to Strapi.

The loggedInStatus$ observed tracks whether the user has logged in and shares this status with components that subscribe to it. The service uses the HttpClient to request Strapi and the StorageService to persist information. They are both injected in its constructor. AuthResponse models the response received from Strapi’s /auth/local endpoint.

B. Data Module Services

The Data module only has one service, the Quiz service. Modify this service and add two newer ones to the module. These new services are:

• A Score service to interface with the Strapi Score API.
• A Normalization service to normalize data from the Strapi API. Normalization is necessary because how data is returned from the Strapi API has been overhauled in v4 and looks completely different from how it was returned in v3. Since the original Angular app used the v3 Strapi API as a backend, we’ll need to rewrite major portions of the app to accommodate the new data structure. It’s much easier to just convert the data to what it looked like in Strapi v3 once it’s received from the Strapi v4 app.

To generate these new services, run:

1
    for service in score normalization; do ng generate service "data/services/${service}"; done

1. The Normalization Service

Strapi v4 overhauled how data is returned and is drastically different from what Strapi v3 returned. For example, single entries are returned in an object under a data property and their attributes under an attributes property. Strapi v3 did not have this nested object structure. . Strapi v3 did not have this nested object structure.

Since the Angular app was initially built using Strapi v3, we need to make many changes to make to work with data from Strapi v4. A normalization service would restructure the data from the Strapi v4 app to something similar to what Strapi v3 returned. In the src/app/data/services/normalization.service.ts file, add the code below:

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
    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { map, switchMap, toArray } from 'rxjs/operators';
    
    interface StrapiEntry { id: number, attributes: any }
    interface StrapiSingleEntryData { data: StrapiEntry }
    interface StrapiMultiEntryData { data: StrapiEntry[] }
    
    @Injectable({
      providedIn: 'root'
    })
    export class NormalizationService {
    
      constructor() { }
    
      restructureAttributes(nestedAttribute?: string): (source$: Observable<StrapiSingleEntryData>) => Observable<any> {
        return source$ => source$.pipe(
          map(v => this.restructureNestedAttributes(v.data, nestedAttribute)),
        );
      }
    
      restructureArrayedAttributes(nestedAttribute?: string): (source$: Observable<StrapiMultiEntryData>) => Observable<any> {
        return source$ => source$.pipe(
          map(v => v.data),
          switchMap(v => v),
          map(v => this.restructureNestedAttributes(v, nestedAttribute)),
          toArray()
        );
      }
    
      private restructureNestedAttributes(v: StrapiEntry, nestedAttribute?: string) {
        if (nestedAttribute) {
          v.attributes[nestedAttribute] = v.attributes[nestedAttribute].data.map((nv: StrapiEntry) => ({ id: nv.id, ...nv.attributes }));
        }
        return { id: v.id, ...v.attributes };
      }
    }

The Normalization service has two public methods:

• restructureAttributes flattens a single entry Strapi response. It returns the single entry from the data property. The content of the attributes property of the single entry are placed at the same level as the entry’s id. For example, { data: { id: 3, attributes: { title: '``quiz``' }} would be converted to { id: 3, title: '``quiz``' }.
• restructureArrayedAttributes works similar to restructureAttributes but it flattens data with multiple entries that are in an array.

2. The Quiz Service

Since the QuizService is a pre-existing service, it only has to be modified to normalize data. Also, since there is a new Score API on Strapi, there will be a new Score service on the Angular app to interface with it. The score method is no longer needed on the QuizService and will be removed. Replace the content of src/app/data/services/quiz.service.ts with the code below:

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
    import { HttpClient, HttpParams } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';
    import { environment } from 'src/environments/environment';
    import { Quiz } from '../models/quiz';
    import { NormalizationService } from './normalization.service';
    
    interface StrapiResponse {
      data: any;
    }
    
    @Injectable({
      providedIn: 'root'
    })
    export class QuizService {
      private url = `${environment.strapiUrl}/quizzes`;
      private populateQuestionsParam = { params: new HttpParams().set('populate', '*') };
    
      constructor(private http: HttpClient, private ns: NormalizationService) { }
    
      getQuizzes(): Observable<Quiz[]> {
        return this.http.get<StrapiResponse>(
          this.url,
          this.populateQuestionsParam
        ).pipe(this.ns.restructureArrayedAttributes('questions'));
      }
    
      getQuiz(id: number): Observable<Quiz> {
        return this.http.get<StrapiResponse>(`${this.url}/${id}`,
          this.populateQuestionsParam
        ).pipe(this.ns.restructureAttributes('questions'));
      }
    }

The Quiz service injects two services into its constructor, HttpClient, to make requests to the Strapi app and NormalizationService to normalize the data returned from Strapi. Its two methods are:

• getQuizzes, which returns all the quizzes.
• getQuiz, which returns a single quiz identified by its id.

populateQuestionsParam is passed to each request to make sure that each returned quiz is populated with its questions.

3. The Score service

This service interfaces with the Strapi Score API. In the src/app/data/services/score.service.ts file, add the code below:

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
    import { HttpClient, HttpParams } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { environment } from 'src/environments/environment';
    import { ScoreResponse } from '../models/score-response';
    import { Answer } from '../models/answer';
    import { Quiz } from '../models/quiz';
    import { Observable } from 'rxjs';
    import { AuthenticationService } from 'src/app/core/services/authentication.service';
    
    @Injectable({
      providedIn: 'root'
    })
    export class ScoreService {
      private url = `${environment.strapiUrl}/scores`;
    
      constructor(private http: HttpClient, private auth: AuthenticationService) { }
    
      createScore(quiz: Quiz, answers: Answer[]): Observable<ScoreResponse> {
        return this.http.post<ScoreResponse>(
          this.url,
          { quiz, answers },
          this.auth.getAuthHeader()
        );
      }
    
      getScore(id: number): Observable<ScoreResponse> {
        return this.http.get<ScoreResponse>(
          `${this.url}/${id}`,
          this.auth.getAuthHeader()
        );
      }
    
      getScores(): Observable<ScoreResponse[]> {
        return this.http.get<ScoreResponse[]>(this.url,
          {
            params: new HttpParams({
              fromObject: {
                'sort': 'createdAt:desc',
                'pagination[pageSize]': 10
              }
            }),
            ...this.auth.getAuthHeader()
          }
        );
      }
    }

The Score service uses the HttpClient service to make a request to Strapi and the AuthenticationService to create authentication headers for the requests. It has three methods:

• createScore, which creates scores given a user’s answers and a quiz to score it against.
• getScore, which gets a single score identified by the provided id.
• getScores, which gets all the scores belonging to the authenticated user.

The data returned by the Strapi Score API does not need to be normalized because the controllers that create and fetch scores were modified to return data that takes a ScoreResponse structure.

Step 5 - Add Access Restriction Guards

In this step, you will add restriction guards that will prevent access to Quiz, Score, and Signup pages. Both guards will be placed in the Core module; they are:

• LoggedInGuard, which prevents unauthenticated users from taking quizzes on the Quiz page and viewing scores on the Score and Scores pages.
• SignupGuard, which prevents logged-in users from accessing the signup page. This is done because already logged-in users don’t need to create accounts. If they wish to create new accounts, they need to log out first.

To generate the guards, run this command on your terminal:

1
    for guard in "logged-in" signup; do ng generate guard "core/guards/${guard}"; done

When prompted on what interface they should implement, select CanActivate.

A. Logged-in Guard

Replace the content of src/app/core/guards/logged-in.guard.ts with this 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
    import { Injectable } from '@angular/core';
    import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
    import { Observable } from 'rxjs';
    import { AuthenticationService } from '../services/authentication.service';
    import { StorageService } from '../services/storage.service';
    
    @Injectable({
      providedIn: 'root'
    })
    export class LoggedInGuard implements CanActivate {
    
      constructor(
        private auth: AuthenticationService,
        private router: Router,
        private ss: StorageService
      ) { }
    
      canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        if (this.auth.checkIfLoggedIn()) {
          return true;
        }
    
        this.ss.setItem('attemptedRoute', state.url);
        return this.router.parseUrl('/');
      }
    }

The logged-in guard uses three other injected services: AuthenticationService to check if a user is logged in, StorageService to store the route they attempted but were denied access, and Router to parse string URLs into URL trees. If an authenticated user attempts to access a route, they can activate it. If they are unauthenticated, the route they’re trying to access is saved in storage and they are redirected to the Quizzes page. When they login, they are redirected to the route they attempted before but were denied.

B. Signup Guard

Replace the content of src/app/core/guards/signup.guard.ts with this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    import { Injectable } from '@angular/core';
    import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
    import { Observable } from 'rxjs';
    import { AuthenticationService } from '../services/authentication.service';
    
    @Injectable({
      providedIn: 'root'
    })
    export class SignupGuard implements CanActivate {
    
      constructor(private auth: AuthenticationService, private router: Router) { }
    
      canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        return this.auth.checkIfLoggedIn() ? this.router.parseUrl('/') : true;
      }
    }

The signup guard uses two injected services: AuthenticationService to check if a user is logged in and Router to parse string URLs into URL trees. When an authenticated user attempts to access the Signup page, they are redirected to the Quizzes page. If they are unauthenticated, they can create an account on the Signup page.

Step 6 - Add and Modify Support Components

In this step, you will create new components to display error and general messages. You will also modify the HeaderComponent to add the login, signup, and user profile buttons. Lastly, you will modify the existing QuestionComponent to work with the newer data models.

A. Core Module Support Components

Two new components will be added to the Core module. The T``oastComponent shows toasts, and the MessageComponent shows an error or general messages on separate pages. To generate both, run:

1
    for comp in toast message; do ng generate component "core/components/${comp}"; done

The TitleComponent displays titles on pages and in other components. Initially, the only stand-alone pages were in the Quiz module. However, now that you will be adding additional pages in other modules, the TitleComponent will also be used in them. It makes sense to move this component from the Quiz module to the Core module. To do this, run the following command:

1
    mv src/app/features/quiz/components/title src/app/core/components

You need to update src/app/features/quiz/quiz.module.ts to reflect this removal by deleting the TitleComponent import and declaration. The QuizModule declarations should now look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @NgModule({
      declarations: [ QuestionComponent, QuizzesComponent, QuizComponent, ScoreComponent],
      imports: [ CommonModule, QuizRoutingModule, NgbModule, ReactiveFormsModule]
    })
    export class QuizModule { }

Next, update **src/app/core/core.module.ts** to include `TitleComponent` as a declaration and export of `CoreModule`.  The highlighted portions are all the code you need to add. 

    import { TitleComponent } from './components/title/title.component';
    
    @NgModule({
      declarations: [ HeaderComponent, NotFoundComponent, ToastComponent, MessageComponent, TitleComponent],
      imports: [ CommonModule, RouterModule ],
      exports: [ HeaderComponent, NotFoundComponent, TitleComponent ]
    })
    export class CoreModule { }

1. The Header Component

In the original header component, the template only consisted of the app title and a home button. In this section, you will add:

• A login button
• A logout button
• A signup button
• A profile button that takes a user to their Scores page

This is what the initial header looked like:

To add functionality for the four additions mentioned above, replace the content of src/app/core/components/header/header.component.ts with this:

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
    import { Component, OnDestroy, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { Subscription } from 'rxjs';
    import { AuthenticationService } from '../../services/authentication.service';
    import { ToastService } from '../../services/toast.service';
    
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.css']
    })
    export class HeaderComponent implements OnInit, OnDestroy {
      isLoggedIn = false;
      avatarInitial = '';
      username = '';
      authStatus!: Subscription;
    
      constructor(
        private auth: AuthenticationService,
        private router: Router,
        private toast: ToastService
      ) { }
    
      ngOnInit(): void {
        this.authStatus = this.auth.loggedInStatus$.subscribe(status => {
          this.isLoggedIn = status;
    
          if (status) {
            this.username = this.auth.getPersistedUser().username;
            this.avatarInitial = this.username[0] || 'Q';
          }
        });
      }
    
      ngOnDestroy(): void {
        this.authStatus.unsubscribe();
      }
    
      logout() {
        this.auth.logout();
        this.toast.showSuccess('Successfully logged out.');
        this.router.navigateByUrl('/');
      }
    }

The Header component injects three services: AuthenticationService to log in and out, Router for navigation, and ToastService to display toasts. When the component is initialized, a check is done to confirm whether the user is already logged in. If they are, their username is fetched from storage and used in the profile button. Their login status, isLoggedIn, is also tracked and used to determine the visibility of the login, logout, and signup buttons. If the user is logged in, the logout and profile buttons are shown. If they are not logged in, the signup and login buttons are shown instead.

When they log out, the logout method is called. In this method, the AuthenticationService logs them out, a successful toast is displayed using the ToastService, and they are directed to the home page.

To add all the buttons, change the content of src/app/core/components/header/header.component.html to the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <div class="d-flex flex-row vw-95 justify-content-between align-items-center mx-auto mt-2">
        <h3 routerLink="/" class="font-weight-bold">Quiz<span class="font-weight-light">App</span></h3>
        <div class="d-flex align-items-center">
            <div class="rounded-circle bg-success text-white avatar mr-2 d-flex align-items-center justify-content-center"
                *ngIf="isLoggedIn" placement="left" ngbTooltip="Scores for {{username}}" routerLink="/scores">
                <h3 class="avatar-text">{{avatarInitial | uppercase}}</h3>
            </div>
            <button routerLink="/auth/signup" type="button" class="m-1 btn app-bg-grey btn-sm" *ngIf="!isLoggedIn">Sign
                Up</button>
            <button routerLink="/auth/login" type="button" class="m-1 btn app-bg-grey btn-sm"
                *ngIf="!isLoggedIn">Login</button>
            <button (click)="logout()" type="button" class="m-1 btn app-bg-grey btn-sm" *ngIf="isLoggedIn">Logout</button>
        </div>
    </div>

To style the buttons, add this to src/app/core/components/header/header.component.css:

1
2
3
4
5
6
7
8
9
    .avatar {
        width: 40px;
        height: 40px;
    }
    .avatar-text {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

Here’s what the header should look like when a user is signed in:

Here’s a screenshot of what it should look like when a user is not signed in:

2. The Message Component

This component shows an error message on a separate page in three instances:

• When a user attempts to score a quiz without providing answers,
• When a user visits the scores page but has not taken any quizzes before and there are no scores to be displayed, and
• When the requested page cannot be found (404).

Change the content of src/app/core/components/message/message.component.ts to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    import { Component, Input } from '@angular/core';
    
    @Component({
      selector: 'app-message',
      templateUrl: './message.component.html',
      styleUrls: ['./message.component.css']
    })
    export class MessageComponent {
      @Input() title = '';
      @Input() subtitle = '';
      @Input() message = '';
      @Input() buttonText = '';
      @Input() redirectPath = '';
    
      constructor() { }
    }

The Message component takes five inputs:

• title: The title of the page
• subtitle: The text that appears under the title
• message: The general or error message to be displayed
• buttonText: The text shown on a button under the message
• redirectPath: The path that the user is redirected to when they click the button above

Add this to src/app/core/components/message/message.component.html:

1
2
3
4
5
6
7
8
9
10
    <div class="flex-grow-1 vw-95 d-flex flex-column align-items-center">
        <app-title *ngIf="title && subtitle" [title]="title" [subtitle]="subtitle"></app-title>
        <div class="card app-bg-light-green m-2">
            <div class="card-body d-flex align-items-center flex-column">
                <h4 class="font-weight-normal text-center mb-3 message">{{message}}
                </h4>
                <button [routerLink]="redirectPath" type="button" class="btn btn-sm app-bg-green">{{buttonText}}</button>
            </div>
        </div>
    </div>

To style this component, add this to src/app/core/components/message/message.component.css:

1
2
3
    .message {
        width: 40vw;
    }

You will see screenshots of this component in use in step 7.

3. The Toast Component

This component shows toast messages. Replace the content of src/app/core/components/toast/toast.component.ts with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    import { Component } from '@angular/core';
    import { ToastService } from '../../services/toast.service';
    
    @Component({
      selector: 'app-toast',
      templateUrl: './toast.component.html',
      host: { '[class.ngb-toasts]': 'true' },
      styleUrls: ['./toast.component.css']
    })
    export class ToastComponent {
      show = true;
    
      constructor(public toastService: ToastService) { }
    
      close() {
        this.show = false;
      }
    }

The toast component only displays toast messages. It uses the ToastService to manage different messages sent from across the app. The close method dismisses the toast message.

Replace the content of src/app/core/components/toast/toast.component.html with this:

1
2
3
4
    <ngb-toast *ngFor="let toast of toastService.toasts" [header]="toast.header || 'Message'" [class]="toast.classname"
        [autohide]="true" [delay]="toast.delay || 5000" (hidden)="close()">
        {{ toast.text }}
    </ngb-toast> 

Here’s a screenshot of a sample toast message:

4. The Title Component

The pages that display quizzes and scores heavily rely on the TitleComponent to show their information. Since some properties in the Quiz and Score models aren’t always guaranteed, the TitleComponent has to be able to accept undefined values as input. To make the TitleComponent inputs take undefined values, modify them in the src/app/core/components/title/title.component.ts file as shown below:

1
2
3
4
5
6
    export class TitleComponent {
      @Input() title: string | undefined = '';
      @Input() subtitle: string | undefined = '';
    
      constructor() { }
    }

B. Quiz Module Support Components

There is only one support component in the Quiz module. It’s already an existing component from the initial Angular app.

1. The Question Component

In this component, you will update some of the answer models it imports and uses. Replace the content of the src/app/features/quiz/components/question/question.component.ts file with the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    import { Component, Input, Output, EventEmitter } from '@angular/core';
    import { Answer } from 'src/app/data/models/answer';
    import { Question } from 'src/app/data/models/question';
    
    @Component({
      selector: 'app-question',
      templateUrl: './question.component.html',
      styleUrls: ['./question.component.css']
    })
    export class QuestionComponent {
      @Input() question = {} as Question;
      @Input() number = 0;
      @Output() setAnswer = new EventEmitter<Answer>();
    
      selectedAnswer = '';
    
      constructor() { }
    
      pickAnswer(id: number, answer: string, value: string = '') {
        this.selectedAnswer = `[${answer}] ${value}`;
        this.setAnswer.emit({ question: { id }, value: answer });
      }
    }

In this file, you will replace the UserAnswer model which you removed in step 3 with the new Answer model.

Step 7 - Add New Pages and Modify Existing Ones

In this step, you will add new pages for logging in, signing up, and showing all scores. You will also modify the Quiz, Quizzes, Not-Found, and single Score pages.

A. Auth Module Pages

This is a new module that contains the signup and login pages. Since it didn’t exist in the initial app, you’ll have to generate it by running the code below:

1
    ng generate module features/auth --routing 

The --routing flag adds an AuthRoutingModule to handle routing for the AuthModule. To generate the login and signup pages run the following code:

1
for page in login signup; do ng generate component "features/auth/pages/${page}"; done

Running the above command will generate both the LoginComponent and SignupComponent at src/app/features/auth/pages.

1. The Signup Page

This page enables users to register accounts. A user will provide a username, email, and password to a form to create an account. Replace the content of src/app/features/auth/pages/signup/signup.component.ts with this:

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
    import { Component, OnDestroy } from '@angular/core';
    import { FormBuilder, Validators } from '@angular/forms';
    import { Router } from '@angular/router';
    import { Subscription } from 'rxjs';
    import { AuthenticationService } from 'src/app/core/services/authentication.service';
    import { StorageService } from 'src/app/core/services/storage.service';
    import { ToastService } from 'src/app/core/services/toast.service';
    
    @Component({
      selector: 'app-signup',
      templateUrl: './signup.component.html',
      styleUrls: ['./signup.component.css']
    })
    export class SignupComponent implements OnDestroy {
      signupForm = this.fb.group({
        username: ['', [Validators.required]],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(8)]]
      });
    
      private registrationSub: Subscription | undefined;
    
      constructor( private fb: FormBuilder, private auth: AuthenticationService, private router: Router, private ss: StorageService, private toast: ToastService) { }
    
      ngOnDestroy(): void {
        if (this.registrationSub) {
          this.registrationSub.unsubscribe();
        }
      }
    
      get password() { return this.signupForm.get('password'); }
    
      signup() {
        const user = this.signupForm.value;
    
        this.registrationSub = this.auth.register(
          user.username,
          user.email,
          user.password
        ).subscribe(
          resp => {
            this.signupForm.reset();
    
            this.auth.persistUser(resp);
    
            this.toast.showSuccess('Successfully created account. Redirecting you to the quizzes.');
    
            const attemptedRoute = this.ss.getItem('attemptedRoute');
            this.ss.removeItem('attemptedRoute');
            this.router.navigateByUrl(attemptedRoute || '/')
          },
          () => {
            this.toast.showDanger('There was a problem registering your account.');
          }
        );
      }
    }

This component injects four services into its constructor: FormBuilder to create and manage the signup form, AuthenticationService to make a user registration request to Strapi, StorageService to retrieve any route the user attempted and was denied, and ToastService to display toast messages. signupForm is a form group that contains the username, email, and password form controls. registrationSub holds the subscription returned when a user signs up; it is unsubscribed from in the ngDestroy method when the component is destroyed.

The component has two methods:

• password to get the password value from the signupForm
• signup, which creates the new user using the AuthenticationService

When the signup method is called, all the values from the signupForm are passed to the register method of the AuthenticationService. Once a successful response is received, the signupForm is reset, user details are persisted, and a success toast is displayed. If the user attempted to access a route but was prevented access by a guard, the route they tried to access is retrieved using the StorageService. The user is then redirected to that route and the initially attempted route is removed from storage. If registration is unsuccessful, an error toast message is displayed.

Replace the content of the src/app/features/auth/pages/signup/signup.component.html template with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <div class="d-flex flex-column align-items-center">
        <app-title title="Register" subtitle="Create an account to take a quiz"></app-title>
        <form class="d-flex flex-column align-items-center mt-3" [formGroup]="signupForm" (ngSubmit)="signup()">
            <div class="form-group d-flex flex-column  align-items-center">
                <label for="exampleInputEmail1">Username</label>
                <input type="text" class="form-control signup-input" formControlName="username">
            </div>
            <div class="form-group d-flex flex-column  align-items-center">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control signup-input" formControlName="email">
            </div>
            <div class="form-group d-flex flex-column  align-items-center">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control signup-input" formControlName="password">
            </div>
            <div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger"
                role="alert">
                Your password should be at least 8 characters long.
            </div>
            <button type="submit" class="btn btn-dark" [disabled]="!signupForm.valid">Register</button>
        </form>
    </div>

In this template, the form controls are added to an HTML form. If the password entered fails validation as specified in the component (it is a required value with a minimum length of 8), an error message is displayed. To style the form, add this to src/app/features/auth/pages/signup/signup.component.css:

1
2
3
    .signup-input {
        min-width: 25vw;
    }

Here is a screenshot of the signup page:

2. The Login Page

On this page, the user provides their email and password to sign in. There’s a login form containing input fields for these values to be entered and submitted in the template. Replace the content of src/app/features/auth/pages/login/login.component.ts with this:

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
    import { Component, OnDestroy } from '@angular/core';
    import { FormBuilder, Validators } from '@angular/forms';
    import { Router } from '@angular/router';
    import { Subscription } from 'rxjs';
    import { AuthenticationService } from 'src/app/core/services/authentication.service';
    import { StorageService } from 'src/app/core/services/storage.service';
    import { ToastService } from 'src/app/core/services/toast.service';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnDestroy {
      loginForm = this.fb.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required]]
      });
    
      private loginSub: Subscription | undefined;
    
      constructor(private fb: FormBuilder, private auth: AuthenticationService, private router: Router, private toast: ToastService, private ss: StorageService) { }
    
      ngOnDestroy(): void {
        if (this.loginSub) {
          this.loginSub.unsubscribe();
        }
      }
    
      login() {
        const credentials = this.loginForm.value;
    
        this.loginSub = this.auth.login(
          credentials.email,
          credentials.password
        ).subscribe(
          resp => {
            this.loginForm.reset();
    
            this.auth.persistUser(resp);
    
            this.toast.showSuccess('Successfully logged in.');
    
            const attemptedRoute = this.ss.getItem('attemptedRoute');
            this.ss.removeItem('attemptedRoute');
            this.router.navigateByUrl(attemptedRoute || '/')
          },
          () => {
            this.toast.showDanger('Login unsuccessful. Check your credentials.');
          }
        );
      }
    }

Four services are injected into this component’s constructor: FormBuilder to create the login form, AuthenticationService to make a login request to Strapi, ToastService to send toast messages, and StorageService to get routes that the user attempted but was denied. loginForm is the form group that contains the email and password form controls. loginSub holds the subscription returned when making a request to login using the AuthenticationService. When the component is destroyed, loginSub is unsubscribed from to prevent memory leaks.

The only method LoginComponent has is login. When it is called, the email and password values from the loginForm are passed to AuthenticationService's login method which makes a request to Strapi to log in. If the request is successful, the loginForm is reset, the user details persisted, and a success toast message is displayed. If the user attempted to access a route but was denied because they were unauthenticated, they will be redirected to that route and it will be removed from storage. An error toast message is displayed if the signin was unsuccessful.

Add this code to the src/app/features/auth/pages/login/login.component.html template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <div class="d-flex flex-column align-items-center">
        <app-title title="Login" subtitle="Login to take a quiz"></app-title>
        <form class="d-flex flex-column align-items-center mt-3" [formGroup]="loginForm" (ngSubmit)="login()">
            <div class="form-group d-flex flex-column  align-items-center">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control login-input" formControlName="email">
            </div>
            <div class="form-group d-flex flex-column  align-items-center">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control login-input" formControlName="password">
            </div>
            <button type="submit" class="btn btn-dark" [disabled]="!loginForm.valid">Login</button>
        </form>
    </div>

The loginForm can only be submitted when the form is valid i.e. all the form controls pass the validators set in LoginComponent. The submit button is disabled until then. To style the template, add the code below to src/app/features/auth/pages/login/login.component.css:

1
2
3
    .login-input {
        min-width: 25vw;
    }

Here is a screenshot of the login page:

B. Quiz module pages

The QuizModule in the initial version of the Angular app had three pages: the Quiz page, the Quizzes page, and the Score page. You will modify these pages to use the updated data models and services. You will also add a new Scores page to show a complete list of the user’s previous scores on quizzes. To generate the new Scores page, run the command below:

1
    ng generate component features/quiz/pages/scores

1. Quizzes page

This page is responsible for displaying a complete list of available quizzes. Modify this page to disable the Take Quiz buttons on each quiz card if a user is unauthenticated. A user can only take a quiz if they are logged in. Begin by replacing the content of src/app/features/quiz/pages/quizzes/quizzes.component.ts with the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    import { Component } from '@angular/core';
    import { AuthenticationService } from 'src/app/core/services/authentication.service';
    import { QuizService } from 'src/app/data/services/quiz.service';
    
    @Component({
      selector: 'app-quizzes',
      templateUrl: './quizzes.component.html',
      styleUrls: ['./quizzes.component.css']
    })
    export class QuizzesComponent {
      quizzes$ = this.quizService.getQuizzes();
    
      constructor(private quizService: QuizService, public auth: AuthenticationService) { }
    }

The major change made here is the injection of the AuthenticationService in the constructor. It determines if the user is logged in or not.

Proceed to replace the content of src/app/features/quiz/pages/quizzes/quizzes.component.html with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <div class="flex-grow-1 vw-95 d-flex flex-column align-items-center">
        <app-title title="Take a Quiz" subtitle="Test your Knowledge"></app-title>
        <div *ngIf="quizzes$ | async as quizzes" class="vw-75 d-flex align-items-center justify-content-center flex-wrap">
            <div *ngFor="let quiz of quizzes" class="align-self-start m-2 card quiz-card">
                <div class="card-body d-flex flex-column  flex-grow-1">
                    <h5 class="card-title font-weight-bold">{{quiz.title}}</h5>
                    <p class="card-text">{{quiz.description}}</p>
                </div>
                <ul class="list-group list-group-flush  flex-shrink-1">
                    <li class="list-group-item">Questions: {{quiz.questions?.length}}</li>
                    <li class="list-group-item">
                        <button *ngIf="{ status: auth.loggedInStatus$ | async } as isLoggedIn" type="button"
                            [routerLink]="['/quizzes', quiz.id]" class="btn btn-sm" [disabled]="!isLoggedIn.status">
                            {{ isLoggedIn.status ? 'Take Quiz' : 'Login to attempt' }}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

The main change in this template is the replacement of the Take Quiz link with a button that is disabled if the user is not logged in. How some quiz and question attributes are accessed have also been modified to be in line with the new data models. The highlighted portions show all the changes that were made.

Because the Take Quiz link was replaced with a button that can be disabled, styling for the template had to be modified to reflect the change. Since this styling file is rather large, its source code won’t be placed here. Visit this link for the styling source, copy it, and replace the content of src/app/features/quiz/pages/quizzes/quizzes.component.css with it.

Here’s a screenshot of the quizzes page when a user is not logged in. Notice how all the buttons are labeled Login to attempt and are disabled.

Here’s a screenshot of the same page when a user is logged in. Once you login, the button text changes to Take Quiz and is enabled.

2. Quiz page

The main update made on this page is the change of the UserAnswer model to the Answer model. Replace the content of src/app/features/quiz/pages/quiz/quiz.component.ts to this:

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
    import { Component, OnDestroy, OnInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import { Subscription } from 'rxjs';
    import { Quiz } from 'src/app/data/models/quiz';
    import { QuizService } from 'src/app/data/services/quiz.service';
    import { switchMap } from 'rxjs/operators';
    import { FormControl, FormGroup, Validators } from '@angular/forms';
    import { Answer } from 'src/app/data/models/answer';
    
    @Component({
      selector: 'app-quiz',
      templateUrl: './quiz.component.html',
      styleUrls: ['./quiz.component.css']
    })
    export class QuizComponent implements OnInit, OnDestroy {
      quiz!: Quiz;
      quizForm: FormGroup = new FormGroup({});
      quizId = 0;
    
      private quizSub!: Subscription;
    
      constructor( private quizService: QuizService, private route: ActivatedRoute, private router: Router ) { }
    
      ngOnDestroy(): void {
        this.quizSub.unsubscribe();
      }
    
      ngOnInit(): void {
        this.quizSub = this.route.paramMap.pipe(
          switchMap(params => {
            this.quizId = Number(params.get('id'));
            return this.quizService.getQuiz(this.quizId);
          })
        ).subscribe(
          quiz => {
            this.quiz = quiz;
    
            if (quiz.questions) {
              quiz.questions.forEach(question => {
                this.quizForm.addControl(question.id.toString(), new FormControl('', Validators.required));
              });
            }
          }
        );
      }
    
      setAnswerValue(answ: Answer) {
        this.quizForm.controls[answ.question.id].setValue(answ.value);
      }
    
      score() {
        this.router.navigateByUrl(`/quizzes/${this.quizId}/score`, { state: this.quizForm.value });
      }
    }

The highlighted portions are the changes that were made to the file. Most of the changes reflect the substitution of UserAnswer for Answer. The quizSub subscription was made private as it’s not used outside the component. Also, the score page URL changed from /quiz/${this.quizId}/score to /quizzes/${this.quizId}/score in the score method to better conform to REST resource naming best practices (quiz is plural now).

The src/app/features/quiz/pages/quiz/quiz.component.html template also needs modifying to conform to the new data models. Replace all its content with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <div *ngIf="quiz" class="d-flex flex-column align-items-center">
        <app-title [title]="quiz?.title" [subtitle]="quiz?.description"></app-title>
        <form class="d-flex flex-column" [formGroup]="quizForm" *ngIf="(quiz?.questions?.length ?? 0) > 0"
            (ngSubmit)="score()">
            <ngb-carousel [animation]="false" [interval]="0" [wrap]="false">
                <ng-template ngbSlide *ngFor="let question of quiz.questions; index as no">
                    <div class="picsum-img-wrapper">
                        <app-question [question]="question" [number]="no" (setAnswer)="setAnswerValue($event)">
                        </app-question>
                        <input type="hidden" [formControlName]="question.id.toString()" />
                    </div>
                </ng-template>
            </ngb-carousel>
            <button class="btn btn-dark mx-auto m-4 btn-lg app-bg-light-purple" [disabled]="!quizForm.valid">Submit</button>
        </form>
        <div *ngIf="quiz?.questions?.length === 0" class="card app-bg-light-purple m-2">
            <div class="card-body d-flex flex-column align-items-center">
                <h4 class="font-weight-normal text-center mb-3">This quiz has no questions.</h4>
                <a routerLink="/" class="btn btn-sm app-bg-purple">See More Quizzes</a>
            </div>
        </div>
    </div>

The highlighted portions are the changes made to the template. Nothing has changed in the appearance of the page from the initial version of the app, but here’s a screenshot of what it looks like:

3. The Score Page

The score page shows individual scores. It’s used in two instances: to show a calculated score immediately a user submit answers to a quiz and to show a score for a past attempted quiz. The major changes you’ll make to this file are updating the data models and services it uses. Replace the content of src/app/features/quiz/pages/score/score.component.ts with this:

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
    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { iif, Observable } from 'rxjs';
    import { switchMap } from 'rxjs/operators';
    import { Answer } from 'src/app/data/models/answer';
    import { ScoreResponse } from 'src/app/data/models/score-response';
    import { ScoreService } from 'src/app/data/services/score.service';
    
    @Component({
      selector: 'app-score',
      templateUrl: './score.component.html',
      styleUrls: ['./score.component.css']
    })
    export class ScoreComponent implements OnInit {
      scoreResp$: Observable<ScoreResponse> | undefined;
      id = 0;
    
      constructor(private route: ActivatedRoute, private scoreService: ScoreService) { }
    
      ngOnInit(): void {
        this.scoreResp$ = this.route.paramMap
          .pipe(
            switchMap(params => {
              const state = window.history.state;
              this.id = Number(params.get('id'));
    
              if (window.location.pathname.startsWith('/quizzes/')) {
                let reqBody: Answer[] = [];
    
                for (const [qstId, answ] of Object.entries(state)) {
                  if (typeof answ === 'string') {
                    reqBody.push({ question: { id: Number(qstId) }, value: answ.toLowerCase() });
                  }
                }
    
                return iif(() => reqBody.length > 0,
                  this.scoreService.createScore({ id: this.id }, reqBody));
              }
    
              return this.scoreService.getScore(this.id);
            })
          );
      }
    }

Two services are injected into this component’s constructor: ActivatedRoute to get the quiz id from the route params and ScoreService to create and fetch individual scores. scoreResp$ holds the results from a request to the Strapi Score API. id is either a quiz or score id.

When the component is initialized, the answers the user gave and the quiz/score id are retrieved from window.history.state, and the route params respectively. If the page route path is /quizzes/{id}/score, a score is created using the answers and quiz id. A request body is constructed from the answers and a request is made using the ScoreService's createScore method to create a score. If no answers are provided, no request is made. If the page route path is /scores/{id}, then an existing score is fetched using the id. In this case, id is a score identifier and not a quiz identifier as in the former case.

Update the content of the src/app/features/quiz/pages/score/score.component.html template to this:

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
    <ng-template #noScore>
        <app-message title="No Results Yet" subtitle="You have to take a quiz to view results"
            message="You haven't provided any answers for this quiz." buttonText="See Available Quizzes" redirectPath="/">
        </app-message>
    </ng-template>
    <div *ngIf="scoreResp$ | async as scoreResp;else noScore"
        class="d-flex flex-column justify-content-center align-items-center text-center">
        <app-title [title]="scoreResp?.quiz?.title" [subtitle]="scoreResp?.quiz?.description"></app-title>
        <h5 class="font-weight-lighter pl-2 pr-2">
            {{scoreResp.score.createdAt | date:'fullDate'}} - {{scoreResp.score.createdAt | date:'shortTime'}}
        </h5>
        <hr class="vw-25">
        <h2 class="font-weight-bold">You scored:</h2>
        <h1 class="d-none d-lg-flex display-3 font-weight-bold app-bg-light-green p-2 result rounded">
            {{scoreResp.scoreTotal}}/{{scoreResp.questionCount}}</h1>
        <h1 class="d-md-flex d-lg-none display-3 font-weight-bold app-bg-light-green p-2 result rounded">
            {{scoreResp.scoreTotal}}/{{scoreResp.questionCount}}</h1>
        <h2 class="mt-3 font-weight-bold">Your answers:</h2>
        <table class="table app-bg-light-green">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Picked</th>
                    <th scope="col">Right?</th>
                    <th scope="col">Correct</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let answ of scoreResp.score.answers; index as no">
                    <th scope="row">{{no + 1}}</th>
                    <td>{{answ.value | uppercase}}</td>
                    <td>{{answ.correct ? '✅' : '❌'}}</td>
                    <td>{{(answ.correctValue || answ.value) | uppercase}}</td>
                </tr>
            </tbody>
        </table>
    </div>

In this template, the values changed in the component are updated to match. How a “no answers” error is displayed (in the event that answers are not provided) is also modified. app-message is used to display the aforementioned error. A timestamp is also added and displayed for the score. Lastly, we need to update the styling.

Here’s a screenshot of the new Score page:

Here’s a screenshot of the error displayed when no answers are provided or a previous score cannot be found:

4. The Scores Page

This page displays all the user’s scores for quizzes they attempted in the past. The component didn’t exist before because previous scores were not saved and tracked. Replace the content of src/app/features/quiz/pages/scores/scores.component.ts with:

1
2
3
4
5
6
7
8
9
10
11
12
13
    import { Component } from '@angular/core';
    import { ScoreService } from 'src/app/data/services/score.service';
    
    @Component({
      selector: 'app-scores',
      templateUrl: './scores.component.html',
      styleUrls: ['./scores.component.css']
    })
    export class ScoresComponent {
      scores$ = this.score.getScores();
    
      constructor(private score: ScoreService) { }
    }

This component’s constructor has only one service injected, ScoreService. You’ll use this service to fetch all the logged-in user’s scores. The scores$ observable manages these scores and is returned when the getScores method of ScoreService is called.

In the src/app/features/quiz/pages/scores/scores.component.html template, add the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <ng-template #noScores>
        <app-message message="Sorry. You haven't taken any quizzes yet. So there are no scores to show."
            buttonText="See Available Quizzes to Try" redirectPath="/">
        </app-message>
    </ng-template>
    <div *ngIf="scores$ | async as scores" class="d-flex flex-column justify-content-center align-items-center">
        <app-title title="Your Scores" subtitle="Check out your performance"></app-title>
        <div *ngIf="scores.length > 0;else noScores" class="list-group mt-3 mb-5">
            <a *ngFor="let scoreResp of scores" class="list-group-item list-group-item-action score"
                [routerLink]="['/scores', scoreResp.score.id]">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{scoreResp.quiz.title}}</h5>
                    <h5 class="font-weight-bold text-success">{{scoreResp.scoreTotal+'/'+scoreResp.questionCount}}</h5>
                </div>
                <p class="mb-1">{{scoreResp.quiz.description}}.</p>
                <small>{{scoreResp.score.createdAt | date:'fullDate'}} - {{scoreResp.score.createdAt |
                    date:'shortTime'}}</small>
            </a>
        </div>
    </div>

In this template, all the returned scores are iterated over and added to the page. If the user has no previous scores, a “No scores” message is displayed on the page. To style the template, add this to src/app/features/quiz/pages/scores/scores.component.css:

1
2
3
    .score {
        min-width: 35vw;
    }

Here’s a screenshot of the scores page with a logged-in user’s scores:

Here’s a screenshot of the message displayed if the user has no past scores:

C. Core module

There is only one page in the Core module, the not-found page, and it was already present in the initial version of the app.

1. Not Found Component

Now that the new MessageComponent exists, you can take advantage of it to simplify how the not-found page displays its message. Replace the content of the src/app/core/pages/not-found/not-found.component.html template with:

1
2
3
    <app-message title="404" subtitle="Page Not Found" message="There was a problem finding your page."
        buttonText="Go to Home Page" redirectPath="/">
    </app-message>

Here’s a screenshot of this page:

Step 8 - Add Routes for New Pages, Update Module Options, and Place Finishing Touches

In this step, you will add routes for the new pages you created in step 7. You will also update module options like imports and exports. Lastly, you will put finishing touches on the app like updating AppComponent.

A. Core Module

Since the ToastComponent, and MessageComponent are used in other modules, you’ll need to export them from the CoreModule by including them in CoreModule's exports option. In the src/app/core/core.module.ts file, import the ToastComponent and MessageComponent and add them to the exports option as highlighted below. You’ll also need to add NgbModule to the imports option because the ToastComponent relies on it to display toast messages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { ToastComponent } from './components/toast/toast.component';
    import { MessageComponent } from './components/message/message.component';
    
    @NgModule({
      declarations: [ HeaderComponent, NotFoundComponent, TitleComponent, ToastComponent, MessageComponent ],
      imports: [ 
        CommonModule,
        RouterModule,
        NgbModule
      ],
      exports: [
        HeaderComponent,
        NotFoundComponent,
        TitleComponent,
        ToastComponent,
        MessageComponent
      ]
    })
    export class CoreModule { }

B. Auth Module

This module is missing some imports that its components rely on. The login and signup pages use form controls, validators, and form groups from the ReactiveModule. These pages also use the TitleComponent from the CoreModule to show page titles. So you’ll have to include those in the src/app/features/auth/auth.module.ts file. Add the highlighted parts to the aforementioned file.

1
2
3
4
5
6
7
8
9
10
11
12
13
    import { ReactiveFormsModule } from '@angular/forms';
    import { CoreModule } from 'src/app/core/core.module';
    
    @NgModule({
      declarations: [ LoginComponent, SignupComponent],
      imports: [
        CommonModule,
        AuthRoutingModule,
        ReactiveFormsModule,
        CoreModule
      ]
    })
    export class AuthModule { } 

C. The Auth-Routing Module

To set up routes for the login and signup pages, you’ll have to add them in the AuthRoutingModule . Replace the content of the src/app/features/auth/auth-routing.module.ts file with the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { SignupGuard } from 'src/app/core/guards/signup.guard';
    import { LoginComponent } from './pages/login/login.component';
    import { SignupComponent } from './pages/signup/signup.component';
    
    const routes: Routes = [
      { path: 'login', component: LoginComponent },
      { path: 'signup', canActivate: [SignupGuard], component: SignupComponent }
    ];
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class AuthRoutingModule { }

The highlighted portions are the changes that were made to the file. The login page is available at the /login path and the signup page at the /signup path. These are just the latter parts of the paths for the auth pages. An /auth prefix is added in a later section. The signup page uses the SignupGuard to deny access to the page to authenticated users.

D. The Quiz Module

Since the TitleComponent was moved to the CoreModule, it is no longer accessible to the QuizModule. So, you’ll have to add the CoreModule to QuizModule’s imports. Add the highlighted snippets below to the src/app/features/quiz/quiz.module.ts file.

1
2
3
4
5
6
7
8
9
10
11
12
13
    import { CoreModule } from 'src/app/core/core.module';
    
    @NgModule({
      declarations: [ QuestionComponent, QuizzesComponent, QuizComponent, ScoreComponent, ScoresComponent],
      imports: [
        CommonModule,
        QuizRoutingModule,
        NgbModule,
        ReactiveFormsModule,
        CoreModule
      ]
    })
    export class QuizModule { }

E. The Quiz-Routing Module

We need to add some routes to QuizRoutingModule and modifications to some existing routes. The new and modified routes include:

• /quizzes/{id} for the QuizComponent. This changed from /quiz/{id} to better conform to REST resource naming conventions.
• /quizzes/{id}/score for the ScoreComponent used when creating new scores after taking a quiz. This changes from quiz/{id}/score for the same reason supplied above.
• /scores/{id} for the ScoreComponent to show a saved score from a past quiz attempt. This is a new route.
• /scores for the ScoresComponent to display all of a user’s past scores. This is also a new route.

All the routes are protected from unauthenticated user access using the LogggedInGuard. This is because you need a user to create and fetch scores. Add the highlighted portions to the src/app/features/quiz/quiz-routing.module.ts file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    import { ScoresComponent } from './pages/scores/scores.component';
    import { LoggedInGuard } from 'src/app/core/guards/logged-in.guard';
    
    const routes: Routes = [
        { path: '', component: QuizzesComponent },
        {
            path: 'quizzes', canActivate: [LoggedInGuard], children: [
                { path: ':id', component: QuizComponent },
                { path: ':id/score', component: ScoreComponent }
            ]
        },
        {
            path: 'scores', canActivate: [LoggedInGuard], children: [
                { path: '', component: ScoresComponent },
                { path: ':id', component: ScoreComponent }
            ]
        }
    ]; 

F. App-Routing Module

The last route you have to add to the app is for the AuthModule. It should be available at the /auth/ path. In the src/app/app-routing.module.ts file, add the highlighted portions.

1
2
3
4
5
6
7
8
9
10
11
12
    const routes: Routes = [
      {
        path: 'auth',
        loadChildren: () => import('./features/auth/auth.module').then(m => m.AuthModule)
      },
      {
        path: '',
        loadChildren: () => import('./features/quiz/quiz.module').then(m => m.QuizModule)
      },
      { path: '404', component: NotFoundComponent },
      { path: '**', component: NotFoundComponent }
    ]; 

G. App Component

One last finishing touch you have to make to the app is adding the ToastComponent to AppComponent. It helps to display toast messages on all the app’s pages. Add the highlighted code snippet below to the src/app/component/app.component.html file.

1
2
3
4
5
6
7
    <div class="d-flex flex-column h-100 w-100 p-1 align-items-center">
        <app-header></app-header>
        <div class="d-flex flex-grow-1 align-items-center justify-content-center">
            <router-outlet></router-outlet>
        </div>
    </div>
    <app-toast class="toast-msg"></app-toast>

To position the toast component so that it does not obstruct the header, add this styling to the src/app/component/app.component.css file.

1
2
3
    .toast-msg {
        margin-top: 4rem;
    }

Step 9 - Run the App

Before you can run the Angular app, ensure that the Strapi app you created in part 1 is running. You can start it using the command below on your terminal within the strapi-quiz-app directory.

1
    npm run develop

To run the Angular app, navigate to its root directory and run the command below:

1
    ng serve

The quiz app will be available at http://localhost:4200.

Here’s a video showing your finished app in action.

Conclusion

In this tutorial, you updated the quiz app from the initial “Build a Quiz App using a Strapi API with Angular” tutorial from Angular 11 to 13. You added new user, score, and answer data models to match the Strapi v4 content types created in part 1. Additionally, you created new services to interface with and modified data from the Strapi Score API built in part 1 as well. You then added services to handle authentication using Strapi. New support components like a toasts component were added. Other components like the header were modified to include login, signup, and profile buttons. Several new pages like the Scores, Login, and Signup pages were built, and routes were added for them on the app.

Suppose you’d like to further build on the app. In that case, you can add proper User Profile pages where users can modify their information, change passwords, delete their accounts, etc. You can also extend the Scores page so users can delete past scores. You can find the source code for this tutorial on this GitHub repository under the feat-scores branch. The [tut-feat-scores](https://github.com/zaracooper/quiz-app/commits/tut-feat-scores) branch has commits that correspond to each step in this tutorial. To learn more about Strapi and its other superior features, check out the Strapi website and the Strapi documentation and resources site for v4.