Summary

In this chapter, we built an Angular application for managing and tracking issues using reactive forms and Clarity Design System.First, we installed Clarity to an Angular application and used a data grid component to display a list of pending issues. Then, we introduced reactive forms and used them to build a form for reporting a new issue. We added validations in the form to give our users a visual indication of the required fields and guard against unwanted behavior.An issue-tracking system is only efficient if our users can resolve them. We built a modal dialog using Clarity to resolve a selected issue. Finally, we improved the UX of our application by suggesting related issues when reporting a new one.In the next chapter, we will build a progressive web application for the weather using the Angular service worker.

Exercise

Create an Angular component to edit the details of an existing issue. The component should display the issue number and allow the user to change the title, description, and priority. The title and the description should be required fields.The user should be able to access the previous component using the action menu in the list of pending issues. Add a new action menu button to open the edit issue form.After the user has completed updating an issue, the form should be closed, and the list of pending issues should be refreshed.You can find the solution to the exercise in the Chapter03 folder of the exercise branch at https://github.com/PacktPublishing/Angular-Projects-Third-Edition/tree/exercise.

Further reading

• Angular forms: https://angular.io/guide/forms-overview
• Reactive forms: https://angular.io/guide/reactive-forms
• Validating reactive forms: https://angular.io/guide/form-validation#validating-input-in-reactive-forms
• Passing data to a component: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
• Getting data from a component: https://angular.io/guide/component-interaction#parent-listens-for-child-event
• Getting started with Clarity: https://clarity.design/documentation/get-started

Getting started

The following software tools are required to complete this project:

• Angular CLI: A command-line interface for Angular that you can find at https://angular.io/cli
• GitHub material: The related code for this chapter, which you can find in the Chapter03 folder at https://github.com/PacktPublishing/Angular-Projects-Third-Edition

Installing Clarity in an Angular application

Let’s start creating our issue-tracking system by scaffolding a new Angular application:

ng new issue-tracker --defaults

We use the ng new command of the Angular CLI to create a new Angular application with the following characteristics:

• issue-tracker: The name of the Angular application.
• --defaults: This disables Angular routing for the application and sets the stylesheet format to CSS.

We now need to install the Clarity library in our Angular application:

1. Navigate to the issue-tracker folder that was created and run the following command to install it:

   npm install @cds/core @clr/angular @clr/ui --save
   

2. Open the angular.json file and add the Clarity CSS styles in the styles array:

   "styles": [
     "node_modules/@clr/ui/clr-ui.min.css",
     "src/styles.css"
   ]
   

3. Finally, import ClarityModule and BrowserAnimationsModule in...

Displaying an overview of issues

Our Angular application will be responsible for managing and tracking issues. When the application starts, we should display a list of all pending issues in the system. Pending issues are defined as those issues that have not been resolved. The process that we will follow can be further analyzed as the following:

• Fetching pending issues
• Visualizing issues using a data grid

Fetching pending issues

First, we need to create a mechanism for fetching all pending issues:

1. Use the generate command of the Angular CLI to create an Angular service named issues:

   ng generate service issues
   

   The preceding command will create an issues.service.ts file in the src\app folder of our Angular CLI project.

2. Every issue will have specific properties of a defined type. We need to create a TypeScript interface for that with the following Angular CLI command:

   ng generate interface issue
   

   ...

Reporting new issues

One of the main features of our issue-tracking system is the ability to report new issues. We will use Angular reactive forms to create a form for adding new issues. The feature can be further subdivided into the following tasks:

• Setting up reactive forms in an Angular application
• Creating the report issue form
• Displaying a new issue in the list
• Validating the details of an issue

Let’s begin by introducing reactive forms in our Angular application.

Setting up reactive forms in an Angular application

Reactive forms are defined in the @angular/forms npm package of the Angular framework. To add them to our Angular application:

1. Open the app.module.ts file and import ReactiveFormsModule:

   import { ReactiveFormsModule } from '@angular/forms';
   

2. Add ReactiveFormsModule into the imports array of the @NgModule decorator:

   @NgModule({
     declarations: [
       AppComponent,
   ...

Resolving an issue

The main idea behind having an issue tracking system is that an issue should be resolved at some point. We will create a user workflow in our application to accomplish such a task. We will be able to resolve an issue directly from the list of pending issues. The application will ask for confirmation from the user before resolving with the use of a modal dialog:

1. Create an Angular component to host the dialog:

   ng generate component confirm-dialog
   

2. Open the confirm-dialog.component.ts file and modify it as follows:

   import { Component, EventEmitter, Input, Output } from '@angular/core';
   @Component({
     selector: 'app-confirm-dialog',
     templateUrl: './confirm-dialog.component.html',
     styleUrls: ['./confirm-dialog.component.css']
   })
   export class ConfirmDialogComponent {
     @Input() issueNo: number | null = null;
     @Output() confirm = new EventEmitter<boolean>();
   }
   

   We use the @Input...

Turning on suggestions for new issues

The reactive forms API contains a mechanism for getting notified when the value of a particular form control changes. We will use it in our application to find related issues when reporting a new one. More specifically, we will display a list of suggested issues when the user starts typing in the title form control:

1. Open the issues.service.ts file and add the following method:

   getSuggestions(title: string): Issue[] {
     if (title.length > 3) {
       return this.issues.filter(issue =>
         issue.title.indexOf(title) !== -1);
     }
     return [];
   }
   

   The preceding method takes the title of an issue as a parameter and searches for any issues that contain the same title. The search mechanism is triggered when the title parameter is more than three characters long to limit results to a reasonable amount.

2. Open the issue-report.component.ts file and import the OnInit artifact from the @angular/core npm package...

Summary

In this chapter, we built an Angular application for managing and tracking issues using reactive forms and Clarity Design System.

First, we installed Clarity in an Angular application and used a data grid component to display a list of pending issues. Then, we introduced reactive forms and used them to build a form for reporting a new issue. We added validations in the form to give our users a visual indication of the required fields and guard against unwanted behavior.

An issue-tracking system is only efficient if our users can resolve them. We built a modal dialog using Clarity to resolve a selected issue. Finally, we improved the UX of our application by suggesting related issues when reporting a new one.

In the next chapter, we will build a progressive web application for the weather using the Angular service worker.

Exercise

Create an Angular component to edit the details of an existing issue. The component should display the issue number and allow the user to change the title, description, and priority. The title and the description should be required fields.

The user should be able to access the previous component using the action menu in the list of pending issues. Add a new action menu button to open the edit issue form.

After the user has completed updating an issue, the form should be closed, and the list of pending issues should be refreshed.

You can find the solution to the exercise in the Chapter03 folder of the exercise branch at https://github.com/PacktPublishing/Angular-Projects-Third-Edition/tree/exercise.

Further reading

• Angular forms: https://angular.io/guide/forms-overview
• Reactive forms: https://angular.io/guide/reactive-forms
• Validating reactive forms: https://angular.io/guide/form-validation#validating-input-in-reactive-forms
• Passing data to a component: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
• Getting data from a component: https://angular.io/guide/component-interaction#parent-listens-for-child-event
• Getting started with Clarity: https://clarity.design/documentation/get-started

Join our community on Discord

Join our community’s Discord space for discussions with the author and other readers:

https://packt.link/AngularProjects3e