Tips and Tricks About Angular you knew it before.

·

3 min read

Tips and Tricks About Angular you knew it before.

Angular has many popular as well as unknown features, the easiest way to discover Tips and Tricks to achieve difficult tasks using Angular is to use handful Angular a lot more and learn in the process. Here are some of my favorite Angular tips and tricks.
Angular is a JavaScript framework for building web applications, especially it is integrated under single page applications. As a framework, it offers the best practices and tooling which ease developer to develop these web applications. When you start digging Angular, you’ll be using declarative templates, dependency injection, etc. to devlope applications that can run on all platforms (desktop, web and mobile).

1. ng add -
This Feature introduced in Angular from version 6, ng add adds the npm package for a published library to your working environment and it’ll run simultaneously 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. Your angular application can be converted to a progressive web application using service workers and providing offline functionality using the ng add. You can implement progressive web application features in your application by running the following command: You can add following command to implement progressive web application features in your application

ng add @angular/pwa

Or if you wish to add Material Design in your application, you can add the Angular Material library by following command.

ng add @angular/material

2. Web Components
From Angular version 6 onward, you can develop custom native elements that can be used anywhere outside Angular. This can be done using a package introduced by Angular called Angular Elements (@angular/elements). Angular Elements provides a way to createCustomElements and polyfills to support browsers that aren’t compatible with web components and make it responsive. With the following package, you can package your favourite components and use them within other frameworks like React, Vue, etc. For 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 this tutorial by the official Angular documentation to get started.

3. Aliases for Import Statements
This feature is very useful and is supported out of the box in Angular. I’m sure you’ve encountered instances where imports in your applications are just messy and are difficult to read. They look something like :

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

Here Aliases comes in to picture to ease the burden for components and services paths – this would make these imports relatively easy to read and import. 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 simply follow this:

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

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

Conclusion
Angular is a framework which means it has its way of doing things and producing results. It comes with many features both unknown as well as Popular, 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 dosenot fully cover the extent of what Angular provide us as features.