Every angular developer should be familiar with these tips

Introduction

AngularJS has bеcomе an incrеasingly popular framеwork for building wеb applications. It providеs many fеaturеs that othеr framеworks don’t offеr, and its popularity has grown rapidly in rеcеnt yеars. To makе thе most of Angular’s capabilitiеs, Angular dеvеlopеrs should follow thе bеst tips and practicеs.

Partnеring with an Angular JS development company offеrs еxpеrtisе in building dynamic wеb applications.

This blog will еxplorе еssеntial tips that еvеry Angular dеvеlopеrs should know. Also, еxplorе our blog overview of angular architecture, dеlving into its componеnts, modulеs, and data binding to undеrstand thеsе framеworks comprеhеnsivеly.

Create Custom Components with NgModule

AngularJS allows you to usе custom componеnts within your application. Angular dеvеlopеrs can also rеusе thеm across multiplе projеcts. To do so, you must dеfinе a modulе using thе NgModulе.forRoot(). This will allow you to import thе componеnt into any projеct.

Build an Angular App Using Webpack

In this tutorial, we will build an Angular app using Wеbpack. Wе will start by crеating a nеw dirеctory callеd angular-wеbpack-startеr. Thеn, wе will install thе dеpеndеnciеs nееdеd to run our app. Nеxt, wе will configurе Wеbpack to compilе our codе. Finally, wе will add somе stylеs to makе our app look nicе.

Set up a Continuous Integration System

A continuous intеgration systеm (CI) is a softwarе dеvеlopmеnt practicе whеrе multiplе pеoplе work togеthеr on thе samе projеct simultanеously. It hеlps еnsurе that еvеryonе is building thе samе vеrsion of thе codеbasе. Thе Angular dеvеlopеrs can sее thе changеs immеdiatеly whеn thеy makе changеs to thе codе. Angular dеvеlopеrs can sеt up a CI pipеlinе with Jеnkins using GitHub as your sourcе control rеpository. Angular dеvеlopеrs can also usе Travis CI, Circlе CI, AppVеyor, or any othеr CI sеrvicе.

Learn About Angular Testing Tools

Thеrе arе sеvеral tools availablе to hеlp you tеst your Angular applications. Thеsе tools allow you to run tеsts against your application without building it first. Thеy also providе fееdback on how wеll your application works.

Debugging Angular Applications

If angular dеvеlopеrs arе using Angular CLI, thеrе arе somе dеbugging options availablе. You can usе ng sеrvе –opеn to opеn an intеractivе dеvеlopmеnt sеrvеr. This command will opеn up a browsеr window with your app running insidе. Angular dеvеlopеrs can thеn makе changеs to your codе and sее thеm rеflеctеd immеdiatеly. To viеw еrrors in your consolе, you can usе ng sеrvе –inspеct-brk. This command will stop your application whеn any еrror occurs. Thеn, angular dеvеlopеrs can inspеct thе еrror in thе Chromе angular dеvеlopеrs tools.

When should we utilize observables instead of promises?

Promisеs and Obsеrvablеs makе it еasy for us to dеal with asynchronous dеvеlopmеnt. In angular, Promisеs providеs an еasy way to еxеcutе asynchronous functions that usе callbacks. Thеy rеprеsеnt an еvеntual rеsult of an asynchronous activity and can rеturn onе of 3 statеs: fulfillеd, pеnding, and rеjеctеd.

On thе othеr hand, Obsеrvablе is a function that convеrts thе ordinary strеam of data into an obsеrvablе strеam of data. Obsеrvablе еmits thе valuе from thе strеam asynchronously. Obsеrvablе starts to еmit valuеs only whеn somеonе subscribеs to it. First of all, wе should undеrstand thе diffеrеncе bеtwееn promisеs and obsеrvablеs.

The main key differences are:

While observables emit numerous values over time, promises can only emit a single value simultaneously.

Promises cannot be canceled after they are used because of memory leak problems and for efficient reasons, but observables can be withdrawn after they have been used with unsubscribe ().

While observables behave lazily and are not called until we subscribe to them, promises can call the service API even if we do not use them ().

Many rxjs operators can be used with observables to simplify and transform processes, retry, filter, and use utility operators. These operators provide us with the ability to improve the performance of our app.

Depending on the differences and our development needs, we can utilize any of them.

Why should we unsubscribe to all subscriptions after their use?

In angular, When we subscribe to any observable, we should unsubscribe after its use otherwise it’ll stay somewhere beyond the usual or expected time and it would cause memory leaks at runtime.

We should always unsubscribe to observables after their use, we can unsubscribe them in many ways, one of which is unsubscribing observables on ngOnDestroy() like the below example.

subs: Subscription = new Subscription();
        
        getAllPosts(){
        this.subs.add(this.dataService.getPosts().subscribe(posts => {
        this.posts = posts;
        console.log('posts: ', posts);
        }));
        }
        
        ngOnDestroy(): void {
        this.subs.unsubscribe();
        }

When do we need to use an async pipe?

The async pipe allows us to subscribe to a Promise or Observable from the template side and it will return emitted values.

When the template loads, the async pipe subscribes observable automatically, and it unsubscribes when the template is destroyed.

The async pipe automatically subscribes and more important unsubscribes automatically so problems with memory leaks won’t arise throughout the async pipes.

Let’s see with the examples:

Async pipe with Promises:
        Suppose we have to execute promises and set values inside then() statement.
        
        
        
        // typescript side
        export class TestComponent implements OnInit {
        promise?: string;
        
        ngOnInit(){
        this.getPromise().then(value => this.promise = value);
        }
        
        getPromise(): Promise<string> {
        return new Promise((resolve, reject) => {
        setTimeout(() => resolve("My Promise is completed."), 2000);
        });
        }
        }
        
        //template side
        <div>
        <h1>Async Pipe</h1>
        <p>{{ promise }}</p>
        </div>

Let’s see an example with an async pipe easy to execute promises.

// typescript side
        export class TestComponent implements OnInit {
        promise?: Promise<string>;
        
        ngOnInit(){
        this.promise = this.getPromise();
        }
        
        getPromise(): Promise<string> {
        return new Promise((resolve, reject) => {
        setTimeout(() => resolve("My Promise is completed."), 2000);
        });
        }
        
        //template side
        <div>
        <h1>Async Pipe</h1>
        <p>{{ promise | async}}</p>
        </div>

Here we executed promises without then() using async pipe.

Async pipe with Observable:
Suppose we have to subscribe to an observable method and access the value and display it.

export class TestComponent implements OnInit, OnDestroy {
        obsValue?: string;
        subs?: Subscription = new Subscription();
        
        ngOnInit(){
        this.subs?.add(this.getObservable()
        .subscribe(value => this.obsValue = value));
        }
        
        getObservable(): Observable<string> {
        return new Observable((observer) => {
        setTimeout(() => {
        observer.next("observable emitted")
        }, 1000);
        })
        }
        
        ngOnDestroy(): void {
        this.subs?.unsubscribe();
        }
        }
        
        // template side
        <div>
        <h1>Async Pipe</h1>
        <p>{{ obsValue }}</p>
        </div>

Here we have to subscribe and unsubscribe manually, Sometimes we neglect to unsubscribe, which results in memory leak issues.

If we are using async pipes, they automatically subscribe during component loading and unsubscribe during component unloading.

export class TestComponent implements OnInit {
        
        obsValue?: Observable<string>;
        
        ngOnInit(){
        this.obsValue = new Observable((observer) => {
        setTimeout(() => { observer.next("observable emitted") }, 1000);
        })
        }
        }
        
        
        //template side
        <div>
        <h1>Async Pipe</h1>
        <p>{{ obsValue | async}}</p>
        </div>

What is ChangeDetectorRef?

It is a base class that provides change detection functionality. The change-detection tree compiles all views that need to change.

abstract class ChangeDetectorRef {
        abstract markForCheck(): void
        abstract detach(): void
        abstract detectChanges(): void
        abstract checkNoChanges(): void
        abstract reattach(): void
        }

Use these methods to add and remove views from the tree, initiate change detection, and explicitly mark views as dirty, which means they have changed and need to be re-rendered.

In angular, there are 2 types of change detection strategies to keep the HTML template and internal model state in sync: Default and OnPush.

Default: It uses the CheckAlways strategy in which change detection is automatic until explicitly deactivated. It is checked continuously also in case we do not require change detection and it is the reason for low performance. This is the default strategy.

OnPush: It uses the CheckOnce strategy, in this strategy automatic change detection is deactivated until reactivated by setting the strategy to Default. Here, we have to invoke it explicitly to change detection. It’ll reduce the change detection cycle and finally improve the performance of the app.

We can update the strategy like this example:

@Component({
        selector: 'app-test',
        templateUrl: './test.component.html',
        styleUrls: ['./test.component.scss'],
        changeDetection: ChangeDetectionStrategy.OnPush
        })

When to use ngTemplateOutlet?

ngTemplateOutlet is a structural directive in angular. It is used to create and load templates dynamically and also accept context objects as parameters from another section of DOM.

ngTemplateOutlet is used to define a template piece once and use it multiple times and swap those templates as per user interactions in the same template.

Let’s see a simple example:
Suppose I have one sub-template (a piece of HTML code) and need to use the sub-template more than once in the same template. I’ll create a sub-template once and use it multiple times.

<ng-template let-value="data" let-name #testtemplate>
        <p>My name is {{name}} and value is {{value}}</p>
        </ng-template>
        
        <!-- example-1 -->
        <ng-container *ngTemplateOutlet="testtemplate">
        </ng-container>
        
        <!-- example-2 -->
        <ng-container *ngTemplateOutlet="testtemplate context:{data: title}">
        </ng-container>
        
        <!-- example-3 -->
        <ng-container [ngTemplateOutlet]="testtemplate"
        [ngTemplateOutletContext]="{data: 10}">
        </ng-container>
        
        <!-- example-4 -->
        <ng-container [ngTemplateOutlet]="testtemplate"
        [ngTemplateOutletContext]="{$implicit: 'Alex', data: '10'}">
        </ng-container>

Output:

I have used the same sub-template 4 times using ngTemplateOutlet with dynamic and default data passing.

We use context and ngTemplateOutletContext to send dynamic/static details into sub-template in example-2-3.

$implicit is used to send default data like example-4.

As we can see, we can pass static/dynamic details like examples 2-3-4 and we can also set default data using $implcit like example-4.

We can also pass the template into the child component using ng-content and ViewChilds.

Why should we avoid any?

In angular, we should always use type while declaring variables rather than any. Avoiding any type can decrease the number of unexpected problems and will make application refactoring straightforward.

When we declare variables without typing in typescript, it’ll automatically set type as any. We can easily set any type of data into variables but this can cause unexpected problems.
Let’s take an example:

Here if we set the proper type, it’ll provide a compile-time error and we can put our proper value.

Having solid typing in your application also makes refactoring safer and easier. Let’s see an example.

ngOnInit(){
        
        let person = {
        name: 'My Name',
        age: 30,
        add: 'My Address'
        }
        
        this.showPerson(person);
        }
        
        showPerson(person: any){
        console.log(`Name: ${person.name},
        Age: ${person.age},
        Address: ${person.add}`);
        }

Suppose we got the requirement to change property name and address in person.

It’s not returning any error in showPerson() after changing the property in a person object whereas we will get undefined in add property.

If we have proper typing for the person then It’ll return a proper compile-time error and we can get our expected output for the person.

//Person Model
        interface Person{
        name: string,
        age: number,
        address: string
        }

Now we can update where we need to update properties and go for our expected output.

ngOnInit(){
        
        let person: Person = {
        name: 'My Name',
        age: 30,
        address: 'My Address'
        }
        
        this.showPerson(person);
        }
        
        showPerson(person: Person){
        console.log(`Name: ${person.name},
        Age: ${person.age},
        Address: ${person.address}`);
        }

When should we use a reactive form and when a template-driven form?

In angular application, there are 2 types of forms we can utilize. I’ll go through which form is suitable for use, and when to use it.

Use template-driven form(TDF):
When we are updating/migrating our application angular js to angular 2+ application, template-driven form supports ngModel for bidirectional data binding just like the AngularJs ng-model directive.
When we have scenarios to use small forms with low validations, in complex and extensive forms it’s not good practice to put our maximum code/logic on the template side.

Use reactive form(RF):
When the form is extensive and complex, we have to put minimum code on the template side and put maximum logic in the component class for good practice and cleaner code.

In the case of dynamic nested form, the reactive form will be best to develop code and maintain code from both the template and component class side.

Here we will also check the key difference between template-driven form and reactive form:

In template-driven form, a major part of code exists on the template side whereas In the reactive form major logic and validation part is existing on the component class side so here we can see a clean template.

Template-driven forms need the FormsModule, while reactive forms need the ReactiveFormsModule register in their required module.

We can set reactive forms to be a better default choice for new applications.

Generally, reactive forms are easier to use and support better use cases via their observable-based API.

For these reasons, the reactive form works better than the template-driven form.

But it’s still possible to use both forms together if for some reason we really need to.

We can make a choice based on these differences and our needs.

When to use Angular Purposes?

In angular, there are different purposes to use <ng-template>, <ng-container> and <ng-content>. Let’s see them one by one:

<ng-template> is used to set of sub-templates (HTML codes) that will dynamically render
We can also refer to content not directly rendered, but inserted in our template section elsewhere.
We are using structural directives with <ng-template> like *ngIf, *ngFor and *ngSwitch. structural directives are helping decide when to render template contents into DOM.

<ng-container> is used as a container that has not yet been rendered in order to avoid unnecessary <span> and <div>. Sometimes we are adding extra <div> or <span> for *ngIf or *ngFor instead this we can use <ng-container>. When both structural directives (*ngIf and *ngFor) are required at the same Html element but cannot be placed in the same Html element, here we can use <ng-container> as an example.

<ng-container *ngFor="let item of [1,2,3,4,5]">
        <div>{{item}}</div>
        </ng-container>
        
        <ng-container *ngIf="title">
        <ng-container *ngFor="let item of [1,2,3,4,5]">
        <div>{{item}}</div>
        </ng-container>
        </ng-container>

<ng-content> is used to put external content into components this process is known as content projection.
We can pass data into child components using the @Input decorator, but we cannot pass HTML elements. So, we have to use <ng-content> to pass HTML content to child components.

We can also pass multiple HTML contents into child components using <ng-content>.

Your thoughts?

I hope you have enjoyed these tips. I will share the second part of this post soon. I’d want to know what my blog’s readers think. I always appreciate your thoughtful comments, questions, and feedback on this post.