My Favorite Tips and Tricks in Angular

Angular comes with so many features, both popular and unknown, the easiest way to discover tricks to achieve difficult tasks using Angular is to use Angular a lot more and learn in the process. Here are my favorite Angular tips and tricks.

Angular is a JavaScript framework for building web applications, especially single page applications. As a framework, it offers the best practices and tooling to easily develop these web applications. When building with Angular, you’ll be using declarative templates, dependency injection, etc. to power applications that can run on all platforms (web, mobile and desktop).

Angular already outlines its best practices for easy development using the framework, but there might be other tips that you’ve missed that will most likely make development easier or help your application run and load faster. So here are seven tips and tricks to making Angular applications better.

1. Use Services to Handle Side Effects

When building your application, it is always useful to reduce side effects like HTTP requests, time-based events, etc. Abstracting these from the component to services will help reduce the complexity of the component and also ensures the reusability of the service. An example would be fetching data from an external server. You could fetch data within your component like this:

    import { Component } from "@angular/core";
    
    @Component({
      selector: 'app-component',
      template: '<ul> <li *ngFor="let item of items">{{item}}</li> </ul>',
    })
    export class AppComponent implements OnInit{
      constructor(private http: HttpClient){
      }
      items = [];
      
      getItems(){
        return this.http.get('http://server.com/items')
      }
      
      ngOnInit(){
        this.getItems.subscribe(items => this.items = items);
      }
    }

This method used in fetching the items is local to the component and can’t be reused, and if items are being fetched in other components, this whole procedure will be repeated and that’s not very DRY. If multiple network requests are made, the component will be littered with these methods. Let’s refactor this component to use a service for external requests.

    @Injectable({
      providedIn: 'root'
    })
    export class ItemService {
      constructor (private http: HttpClient) {}
    
      getItems() {
        return this.http.get('http://server.com/items');
      }
    }

Then we’ll make use of it in the component:

    import { Component } from "@angular/core";
    
    @Component({
      selector: 'app-component',
      template: '<ul> <li *ngFor="let item of items">{{item}}</li> </ul>',
    })
    export class AppComponent implements OnInit{
      constructor(private itemsService: ItemsService){
      }
      items = [];
      
      ngOnInit(){
        this.itemsServices.getItems().subscribe(items => this.items = items);
      }
    }

This service can be used to fetch items application-wide.

2. ng add

This utility, introduced in Angular version 6, can be used to add a published package to your work environment, and it’ll run schematics in the background to update the functionality of your application. When downloading a package using this command, it also installs extra dependencies it needs to run, like polyfills, etc. Your application can be converted to a progressive web application using service workers and providing offline functionality using the command.

You can implement progressive web application features in your application by running the following command:

    ng add @angular/pwa

Or if you wish to add a touch of Material Design in your application, you can add the Angular Material library

    ng add @angular/material

3. Web Components

From Angular version 6 onward, you can develop custom native elements that can be used outside Angular. This can be done using a package introduced by Angular called Angular Elements (@angular/elements). This package provides a way to createCustomElements and polyfills to support browsers that aren’t compatible with web components. With this package, you can package your favourite components and use them within other frameworks like React, Vue, etc.

To get started building custom native elements in Angular, install the Angular Elements package in your application using the following command:

    ng add @angular/elements --name=<your_project_name>

You can follow the quick tutorial in the official Angular documentation to get started.

4. Aliases for Import Statements

This very useful feature is supported out of the box in Angular. I’m sure you’ve encountered instances where imports in your applications are just messy and difficult to read. You have something like:

    import { ThatComponent } from '../../../components/this-component/child-component'
    import { ThisService } from '../../../../services/this-service'

I’m sure it would be more helpful to have aliases for the components and services paths – this would make these imports relatively easy to read and import.

When working with React, I’ve researched how to achieve this, but most solutions involve ejecting your application, which doesn’t really sound pleasing. Well, to achieve this in your Angular application, all you need to do is to update the tsconfig.json file:

    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "src",
        "paths": {
          "@components": "app/components",
          "@services": "app/services",
        },
        "..."
      }
    }

What happened here is that the default value of the baseUrl property ./ was updated to point to the src directory. Then we added a new property called paths, which is an object containing key values pairs representing aliases defined for paths in our application. Aliases were defined for the components folder and the services folder. Now if we want to attempt the imports in the previous example, we’ll do this:

    import { ThatComponent } from '@components/this-component/child-component';
    import { ThisService } from '@services/this-service';

This is way cleaner and easier to read than the previous example. If you’ve not booted up your editor to do this for your application already, then you should get to it.

5. Safe Navigation Operator for String Interpolation

When working with objects in Angular templates, you encounter situations where variables are declared without default values – the variable is just presented as a type definition. When trying to access a property on the variable that isn’t readily available, Angular will throw an error saying the variable is undefined.

For example, your template looks like this, you’re reading the name property of a student object:

    <p>{{ student.name }}</p>

And this was how the variable was declared in the component file:

    interface Student {
      name: String;
      age: Number:
    }
    
    @Component({
      selector: 'app-component',
    })
    export class AppComponent{
      student: Student;
    }

Angular will throw an error here.

Using the safe navigation operator, we can safeguard the name property against any null and undefined values. The safe navigation operator in Angular is this syntax ?., and we can update the template to use this:

    <p> {{ student?.name }} </p>

When you run this, Angular doesn’t throw any errors and your console is clear. Another useful technique of avoiding this error is using the and (&&) operator to check if the value exists before reading the property path. We can update the example to use this syntax:

    <p> {{ student && student.name }} </p>

If the value doesn’t exist, Angular will avoid evaluating the expression and nothing is rendered between the tags.

6. Handle Errors Properly with an Error Handler

Angular comes packed with an exception handling service that can be used to manage errors application-wide. When the service detects errors, it catches the error and logs it to the console. This service can be extended to add additional features unique to our application like logging the error using an error monitoring platform or sending the errors to your server for analytics.

The Error Handler is pretty easy to extend: We need to create a class that extends the properties of the ErrorHandler and overrides the built in handleError method used for displaying errors.

Create a file called error-handler.class.ts:

    import {ErrorHandler} from '@angular/core';
    // A fake error monitoring library
    import ErrorClient from '@error-reporters/core';
    
    // Initialize the report library
    const reporter = new ErrorClient();
    
    export class AppErrorHandler extends ErrorHandler {
        constructor(private errorService: ErrorService){
            super(false);
        }
    
        public handleError(error: any): void {
            reporter.sendReport(error)
            super.handleError(error);
        }
    }

In the snippet above, we made use of a fictional error reporting and monitoring library called @error-reporters. After extending the ErrorHandler service, we will report errors emanating from the application in the handleError method before handling the error with the ErrorHandler’s handleError method.

After that, we should register our custom AppErrorHandler in app.module.ts:

    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule ],
        bootstrap: [ AppComponent ],
        providers: [
            {provide: ErrorHandler, useClass: AppErrorHandler}
        ]
    })

You can read more on the default error handler by Angular here.

7. Lazy Load Non-Vital Components

When working on fairly large applications or starting up one, it will be helpful to ensure that components not needed for the initial render of your application are lazy loaded. Lazy loaded in the sense that they’re loaded on demand. For example, when a user navigates away from the initial view of the application, a network request is made to load the destination route. Lazy loading can effectively reduce the bundle size of your application, thus reducing the load time of the application on the browser.

Lazy loading components starts with creating a feature module in your application, the feature module will house the components, services, providers, etc. attached it. The feature module is then loaded in the root routing module of the application. Look at the example below:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FeatureRoutingModule } from './feature-routing.module';
    import { FeatureComponent } from './feature/feature.component';
    
    @NgModule({
      imports: [
        CommonModule,
        FeatureRoutingModule
      ],
      declarations: [FeatureComponent]
    })
    export class FeatureModule { }

This feature module FeatureModule contains a single component FeatureComponent and a routing module FeatureRoutingModule attached to it.

To lazy load this component, we’ll register the feature module’s routing module in the application’s root module:

    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouterModule } from '@angular/router';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot([
          {
            path: 'feature',
            loadChildren: './feature/feature.module#FeatureModule'
          }
        ])
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

With this simple step, a separate bundle will be built apart from the main app bundle. This bundle will be loaded when the user navigates to the /feature route. The experience might be a bit unpleasant because the user will need to wait for the route’s bundle to be loaded, and this might take a while depending on the size of the bundle.

To fix this issue, we’ll prefetch the other bundles in the background once the initial page has been loaded fully. We can do this using a built-in flag provided by Angular called the preloadStrategy. This tells Angular which strategy to use when loading lazied bundles.

Let’s update the current implementation to use the PreloadAllModules strategy:

    import { NgModule } from '@angular/core';
    ...
    import { RouterModule, PreloadAllModules } from '@angular/router';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
       ...
      ],
      imports: [
        ...
        RouterModule.forRoot([
          {
            path: 'feature',
            loadChildren: './feature/feature.module#FeatureModule'
          }
        ], {preloadStrategy: PreloadAllModules})
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

With this update, Angular will handle prefetching of feature bundles in the background for easy navigation.

Conclusion

Angular is a framework which means it has its way of doing things and producing results. It comes with so many features both popular and unknown, the easiest way to discover tricks to achieve difficult tasks using Angular is to use Angular a lot more and research more in the process. The tips and tricks listed above don’t fully cover the extent of what can be done using Angular’s extensive features.

For More Info on Building Great Web Apps

Want to learn more about creating great web apps? It all starts out with Kendo UI for Angular  - the complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

Learn More about Kendo UI

Get a Free Trial of Kendo UI