Year: 2025

Install Angular 9

If you want to work with Angular 9, first you need to setup Angular 9 CLI using the below command:

npm install -g @angular/cli@^9.0.0 

After executing this command, you can check the version using the below command:

ng version 

Angular 9 Updates

Lets understand Angular 9 updates in brief.

Ivy compiler

Ivy compiler becomes the default compiler in Angular 9. This makes apps will be faster and very efficient. Whereas, Angular 8 Ivy is optional. We have to enable it inside tsconfig.json file.

Ivy compiler supports the following features:

• Performs faster testing: TestBed implementation helps to test more efficient.
• Improved CSS class and styles: Ivy styles are easily merged and designed as predictable.
• Improved type checking: This feature helps to find the errors earlier in development process.
• Enhanced debugging: Ivy comes with more tools to enable better debugging features. This will be helpful to show useful stack trace so that we can easily jump to the instruction.
• Ahead-of-Time compiler: This is one of the important improvements in compilers performance. AOT builds are very faster.
• Improved internationalization: i18n substitutions helps to build more than ten times faster than previous versions.

Reliable ng update

ng updates are very reliable. It contains clear progress updates and runs all of the migrations. This can be done using the below command:

ng update --create-commits

Here,

create-commits flag is used to commit your code after each migration.

Improved Dependency Injection

@Injectable service helps to add injector in your application. providedIn meta data provides new option, platform to ensure the object can be used and shared by all application. It is defined below:

@Injectable({
   providedIn:'platform'})classMyService{...}

TypeScript 3.8

Angular 9 is designed to support 3.8 version. TypeScript 3.8 brings support for the below features:

• Type-Only Imports and Exports.
• ECMAScript Private Fields.
• Top-Level await.
• JSDoc Property Modifiers.
• export * as ns Syntax.

Angular 9.0.0-next.5

Angular 9.0.0-next.5 build has small size of main.js file, which makes better performance compare to previous version of Angular 8.

IDE enhancement

Angular 9 provides improves IDE supports. TextMate grammar enables for syntax highlighting in inline and external templates.

The term user input in Angular refers to the data or information that users provide to an Angular application through various means such as typing, clicking, or speaking. It helps users to interact with and control the application. Furthermore, it is necessary for a user-friendly and dynamic experience.

In Angular, you can make use of the DOM element structure of HTML to change the values of the elements at run time. This change occurs based on user input. You can use it to gather feedback, make decisions, and perform tasks based on user preferences and needs.

Taking User Input in Angular

In Angular, we can get input from user through the following ways −

• Using Template-Driven Forms
• Using Reactive Forms
• Using Event Binding
• Using Template Reference Variables

Using Template-Driven Forms

Template-driven forms are used for simple use cases where form validation and control are not too complex. These forms use the ngModel directive for two-way data binding between the form fields and the component class. Creating this type of form is very easy as it requires minimal setup.

Example

Let’s see an example of template driven form where we take input from user.

app.component.html

<form #userForm="ngForm"><label for="name">Name:</label><input type="text" id="name"[(ngModel)]="user.name" name="name" required><label for="email">Email:</label><input type="email" id="email"[(ngModel)]="user.email" name="email" required><button(click)="submitForm()">Submit</button></form>

app.component.ts

import{ Component }from'@angular/core';import{ CommonModule }from'@angular/common';import{ FormsModule }from'@angular/forms';

@Component({
  selector:'app-root',
  standalone:true,
  imports:[CommonModule, FormsModule],
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']})exportclassAppComponent{
  user ={ name:'', email:''};submitForm(){
console.log(this.user);}}</pre>


Using Reactive Forms



Reactive forms are used when you need more control over form validation, form elements, and form states. They are built using FormControl, FormGroup, and FormArray classes. These forms are used for larger, more complex forms.



Example



In this example, we will see a reactive form where we take input from user.



app.component.html



<form [formGroup]="userForm"(ngSubmit)="submitForm()"><label for="name">Name:</label><input id="name" formControlName="name" required><label for="email">Email:</label><input id="email" formControlName="email" required><button type="submit"[disabled]="!userForm.valid">Submit</button></form>



app.component.ts



import{ Component }from'@angular/core';import{ FormBuilder, FormGroup, Validators, ReactiveFormsModule }from'@angular/forms';import{ CommonModule }from'@angular/common';

@Component({
  selector:'app-root',
  standalone:true,
  imports:[CommonModule, ReactiveFormsModule],
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']})exportclassAppComponent{
  userForm: FormGroup;constructor(private fb: FormBuilder){this.userForm =this.fb.group({
  name:['', Validators.required],
  email:['',[Validators.required, Validators.email]],});}submitForm(){
console.log(this.userForm.value);}}</pre>


Using Event Binding



Angular provides option to listen and fire action for each user initiated event in a typical web application. Event binding is the process of targeting an event in a HTML element/component and set a responder for the target event. An event can be set for an HTML element/component by including the event name inside the bracket (( )) and assigning a template statement. The template statement will execute once the event is fired by the user.



Example



Let us create a button and set an action to the button's click event.



Step 1: Create a submit button.



<button type="submit>Submit</button>



Step 2: Create an action method in the component.



myAction(){alert('I am the action function for click event');}



Step 3: Bind our myAction() method to click event of the button as shown below −



<button type="submit"(click)="myAction()">Submit</button>



Now, myAction() will execute whenever the submit button is clicked by the user.



Using Template Reference Variables



The syntax to declare a template reference variables is #var (# along with variable name). Angular allows the variable to be declared as attributes of an element available in the template. The type and value of the template reference variable depend on where it is declared.



1. If a variable is declared inside an element, then it refers to the HTML element.



<button #btn>Click Here</button>



Here, btn refers to the button object of type HtmlButtonElement



2. If a variable is declared inside a component, then it refers to the component instance.



<app-comp #mycomp></app-comp>



Here, mycomp refers to the component instance and can access the internal of the referenced component.



3. If a variable is declared inside a template (ng-template, a tag used to create template within a template), then it refers to the instance of the template.



<ng-template #mytemplate><div>Hi, I am template within the template</div></ng-template>



Here, mytemplate refers to the instance of the template.



4. If a variable is declared inside a custom web component, then it refers to the custom HTML element.



<my-card #mycard>Click Here</my-card>



Here, mycard refers to the custom web component, my-card



Let us see how to create a template reference variable, firstname to refer to an input element as shown below −



<input #firstname id="firstname" type="text" name="firstname" value="John" />



Here,




firstname is the template reference variable



firstname represents the instance of HtmlInputElement element. HtmlInputElement is a type in DOM to represent the input element.



firstname can access all properties and methods of HtmlInputElement element




The template reference variable can be used in template statement and text interpolation.

Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application.

The following diagram shows the entire processes in the lifecycle of the Angular 2 application.

Following is a description of each lifecycle hook.

• ngOnChanges − When the value of a data bound property changes, then this method is called.
• ngOnInit − This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
• ngDoCheck − This is for the detection and to act on changes that Angular can’t or won’t detect on its own.
• ngAfterContentInit − This is called in response after Angular projects external content into the component’s view.
• ngAfterContentChecked − This is called in response after Angular checks the content projected into the component.
• ngAfterViewInit − This is called in response after Angular initializes the component’s views and child views.
• ngAfterViewChecked − This is called in response after Angular checks the component’s views and child views.
• ngOnDestroy − This is the cleanup phase just before Angular destroys the directive/component.

Following is an example of implementing one lifecycle hook. In the app.component.ts file, place the following code.

import{ 
   Component 
}from'@angular/core';@Component({ 
   selector:'my-app', 
   template:'<div> {{values}} </div> '})exportclassAppComponent{ 
   values ='';ngOnInit(){this.values ="Hello";}}

In the above program, we are calling the ngOnInit lifecycle hook to specifically mention that the value of the this.values parameter should be set to Hello.

Once you save all the code changes and refresh the browser, you will get the following output.

In this chapter will discuss the following topics −

• To test Angular Project
• To build Angular Project

Testing Angular Project

During the project setup, the required packages for testing are already installed. There is a .spec.ts file created for every new component, service, directive, etc. We are going to use jasmine to write our test cases.

For any changes added to your component, services, directives or any other files created, you can include your test cases in the respective .spec.ts files. So most of the unit testing can be covered at the beginning itself.

To run the test cases, the command used is as follows−

ng test

Below is the app.component.spec.ts file for app.component.ts −

import{ TestBed, async }from'@angular/core/testing';import{ RouterTestingModule }from'@angular/router/testing';import{ AppComponent }from'./app.component';describe('AppComponent',()=>{beforeEach(async(()=>{
  TestBed.configureTestingModule({
     imports:[
        RouterTestingModule
     ],
     declarations:[
        AppComponent
     ],}).compileComponents();}));it('should create the app',()=>{const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app).toBeTruthy();});it(should have as title 'angular7-app',()=>{const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app.title).toEqual('angular7-app');});it('should render title in a h1 tag',()=>{const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();const compiled = fixture.debugElement.nativeElement;expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular7-app!');})});</pre>


app.component.ts



import{ Component }from'@angular/core';@Component({
   selector:'app-root',
   templateUrl:'./app.component.html',
   styleUrls:['./app.component.css']})exportclassAppComponent{
   title ='angular7-app';}



Now let us run the command to see the test cases running.











The test cases status is shown in the command line as shown above and will also open up in the browser as shown below −







Incase of any failure, it will show the details as follows −



To do that, let us change the app.component.spec.ts as follows −



import{ TestBed, async }from'@angular/core/testing';import{ RouterTestingModule }from'@angular/router/testing';import{ AppComponent }from'./app.component';describe('AppComponent',()=>{beforeEach(async(()=>{
  TestBed.configureTestingModule({
     imports:[
        RouterTestingModule
     ],
     declarations:[
        AppComponent
     ],}).compileComponents();}));it('should create the app',()=&gt;{const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app).toBeTruthy();});it(should have as title 'angular7-app',()=&gt;{const fixture = TestBed.createComponent(AppComponent);const app = fixture.debugElement.componentInstance;expect(app.title).toEqual('Angular 7');// change the 
  title from angular7-app to Angular 7});it('should render title in a h1 tag',()=&gt;{const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();const compiled = fixture.debugElement.nativeElement;expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular7-app!');});});</pre>


In the above file, the test cases check for the title, Angular 7. But in app.component.ts, we have the title, angular7-app as shown below −



import{ Component }from'@angular/core';@Component({
   selector:'app-root',
   templateUrl:'./app.component.html',
   styleUrls:['./app.component.css']})exportclassAppComponent{
   title ='angular7-app';}



Here the test case will fail and below are the details shown in command line and browser.



In command line



Following screen is displayed in command line −







In browser



Following screen is displayed in the browser −







All the failed test-cases for your project will be displayed as shown above in command line and browser.



Similarly, you can write test cases for your services, directives and the new components which will be added to your project.



Building Angular 7 Project



Once you are done with the project in Angular, we need to build it so that it can be used in production or stating.



The configuration for build, i.e., production, staging, development, testing needs to be defined in your src/environments.



At present, we have the following environments defined in src/environment −







You can add files based on your build to src/environment, i.e., environment.staging.ts, enviornment.testing.ts, etc.



At present, we will try to build for production environment. The file environment.ts contains default environment settings and details of the file as follows −



export const environment = {
   production: false
};




To build the file for production, we need to make the production: true in environment.ts as follows −



export const environment = {
   production: true
};




The default environment file has to be imported inside components as follows −



app.component.ts



import{ Component }from'@angular/core';import{ environment }from'./../environments/environment';@Component({
   selector:'app-root',
   templateUrl:'./app.component.html',
   styleUrls:['./app.component.css']})exportclassAppComponent{
   title ='angular7-app';}



The environment replacement from default to production which we are trying to do are defined inside angular.json fileReplacements section as follows −



"production":{"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.prod.ts"}],}



When the command for build runs, the file gets replaced to src/environments/environment.prod.ts. The additional configuration like staging or testing can be added here as shown in the below example −



"configurations":{"production":{...},"staging":{"fileReplacements":[{"replace":"src/environments/environment.ts","with":"src/environments/environment.staging.ts"}]}}



So the command to run the build is as follows −



ng build --configuration = production // for production environment
ng build --configuration = staging // for stating environment




Now let us run the build command for production, the command will create a dist folder inside our project which will have the final files after build.











The final files are build inside dist/ folder which can be hosted on the production server at your end.

Errors are the unexpected issue or problem that occurs during the execution of a program. Incorrect syntax, invalid input, system failures or bug in API logic could be the possible reasons for these errors. These errors may affect the user experience in negative way, hence, it is necessary to handle them at compile time.

Error handling is the process of detecting and resolving these errors or exceptions before execution. Angular provides a number of ways to handle the errors that we are going to learn in this tutorial.

Handling Errors in Angular

There are multiple ways to handle errors in Angular, which are given below −

• Using ErrorHandler class
• Using HttpInterceptor interface
• Using try-catch blocks
• Using validation

Using ErrorHandler Class

The ErrorHandler is a built-in class of the Angular @angular/core package. It provides a hook to catch errors globally. When something goes wrong, like any unhandled exception occurs anywhere in the application, this class catches that exception and prints the error messages on console.

Remember! the ErrorHandler class simply prints the error message so that developers can see what went wrong and fix it. However, you can replace this default behavior by creating a custom ErrorHandler.

Extend the ErrorHandler class and override its handleError() method as shown below to create a custom behavior of this class −

import{ Injectable, ErrorHandler }from'@angular/core';

@Injectable({
   providedIn:'root'})exportclassGlobalErrorHandlerimplementsErrorHandler{handleError(error: any):void{// Log the error to an external service or display a message
  console.error("An error occurred:", error);// Create any custom behavior}}</pre>


Using HttpInterceptor Interface



The HttpInterceptor is an interface that is used for handling HTTP-specific errors, such as network issues, server errors, etc. It can intercept and modify HTTP requests or responses. Think of it as a service that can check and change the data going to and coming from a server.



To use an HttpInterceptor, create a class that implements the HttpInterceptor interface and define the intercept() method. This method takes an HTTP request and a handler, and it returns an observable of the HTTP event. Inside this method, you can modify the request or response as needed.



import{ Injectable }from'@angular/core';import{ HttpEvent, HttpInterceptor, HttpHandler, HttpRequest }from'@angular/common/http';import{ Observable }from'rxjs';import{ catchError }from'rxjs/operators';import{ throwError }from'rxjs';

@Injectable({
   providedIn:'root'})exportclassErrorInterceptorimplementsHttpInterceptor{intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{return next.handle(req).pipe(catchError((error)=>{// Handle error 
        console.error('HTTP Error:', error);returnthrowError(error);}));}}</pre>


Using Try-Catch Blocks



In Angular, errors can occur during component lifecycle. To handle these errors, you can use the a try-catch block within the ngOnInit(), which is a component lifecycle hook defined by OnInit interface. It is important to implement this interface as it helps to check if component is properly initialized.



The try block is used to wrap the code that might throw an error during its execution. And, the catch block is used to handle any errors or exceptions that occur within the try block.



Here, you can see a component with try-catch block:



import{ Component, OnInit }from'@angular/core';import{ CommonModule }from'@angular/common';

@Component({
  selector:'app-example',
  standalone:true,
  imports:[CommonModule],
  templateUrl:'./example.component.html',
  styleUrls:['./example.component.css']})exportclassExampleComponentimplementsOnInit{ngOnInit(){try{// code that might throw an errorthrownewError("Error message");}catch(error){
  console.error("error caught", error);}}}</pre>


Using Validation



Validation is used in Angular Forms to validate whether the user input is in the correct format or not before submission. The reactive forms and template-driven forms has built-in validators to handle validation errors.



With reactive forms, you can easily validate user input and display custom error messages as shown in the following code block −



import{ Component }from'@angular/core';import{ FormBuilder, FormGroup, Validators }from'@angular/forms';import{ CommonModule }from'@angular/common';

@Component({
   selector:'app-registration',
   standalone:true,
   imports:[CommonModule],
   templateUrl:'./registration.component.html',
   styleUrls:['./registration.component.css']})exportclassRegistrationComponent{
   registrationForm: FormGroup;constructor(private fb: FormBuilder){this.registrationForm =this.fb.group({
     username:['',[Validators.required, Validators.minLength(4)]],
     email:['',[Validators.required, Validators.email]],});}onSubmit(){if(this.registrationForm.invalid){this.showValidationErrors();return;}}privateshowValidationErrors(){
  Object.keys(this.registrationForm.controls).forEach(control=&gt;{const formControl =this.registrationForm.get(control);if(formControl?.invalid){
        console.error(${control} is invalid);}});}}</pre>


Print Page