Angular Trackby to improve ngFor Performance

Do you utilize ngFor in Angular to iterate over arrays or collections? If that's the case, you might have come across performance issues or unexpected behavior when updating or deleting items. But fret not! Angular offers a practical solution known as trackBy that can greatly enhance the performance and stability of your ngFor loops. Let's delve into it and learn how to effectively use it.

The Challenge

By default, Angular employs the index of each item in an array to track changes in ngFor loops. This implies that if the array's order changes or items are added or removed, Angular will re-render the entire list. Such a scenario can lead to performance bottlenecks, particularly when dealing with large arrays or complex components within the loop.

The following example shows what happens when we refresh the entire list. The App displays the list of names. it has option to add a name, remove a name and refresh the entire name list.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  names = new Array<string>();

  name: string = '';

  ngOnInit() {
    this.Refresh();
  }

  remove(i: number) {
    this.names.splice(i, 1);
  }

  addMovie() {
    this.names.push(this.name);
    this.name = '';
  }

  Refresh() {
    console.log('refresh');
    this.names = ['Manish', 'Rahul', 'Ashish', 'Aditya', 'Rohan'];
  }
}

HTML

<p>App Component</p>
<ul>
    <li *ngFor="let name of names; index as i">
        {{i}}. {{name}} <button (click)="remove(i)">remove</button>
    </li>
</ul>

<button (click)="Refresh()">Refresh>/<button> <br/>

Name : <input type="text" [(ngModel)]="name">
<button (click)="addMovie()">Add Name</button>

Angular - @HostBinding and @HostListener

Today, let's explore two powerful decorators in Angular: @HostBinding and @HostListener.The HostBinding and HostListener are decorators in Angular. HostListener listens to host events, while HostBinding allows us to bind to a property of the host element.

These decorators allow us to enhance the behavior of a component by interacting with its host element. Let's understand how they work and how we can effectively use them.

HostElement

The host element is the element on which we attach our directive or component. Remember components are directives with a view (template).

@HostBinding

The @HostBinding decorator enables us to bind a class property to a property of the host element. This way, we can dynamically modify the properties of the host element based on changes in our component's logic.

By utilizing this decorator, we can seamlessly update attributes, classes, or styles of the host element. Let's take a look at an example to illustrate the usage of @HostBinding:

import { Directive, HostBinding, OnInit } from '@angular/core';
@Directive({ selector: '[hostBindingExample]' })
export class HostBindingExampleDirective implements OnInit {
  @HostBinding('style.border') border: string = '';

  ngOnInit() {
    this.border = '5px solid green';
  }
}

In the above code snippet, hostBindingExample directive, uses the HostBinding on style.border property of the parent element to the border property.Whenever we change the value of the border, the angular will update the border property of the host element.

Angular- Directive to Allow Number Only in Input Textbox

In this post, we will create a directive which will allow only numbers to input textbox. User will not allow to enter any other value, only numbers.

Below is the code of directive which will check the input value and allow if the input value is number-

import { Directive, HostListener } from '@angular/core';

@Directive({ selector: '[allowNumberOnly]' })
export class AllowNumberOnly {
  readonly NUMBER_REGEX = '^[0-9]';
  @HostListener('keypress', ['$event'])
  onKeyPress(event: any): boolean {
    if (!new RegExp(this.NUMBER_REGEX).test(event.key)) {
      return false;
    }
    return true;
  }
}

To use the directive in application, we need to add the directive under declarations array of App Module file.

Basics of Web API- HTTP

Hyer-Text Transfer Protocol(HTTP)

• HTTP(Hyer-Text Transfer Protocol) is a communication protocol on the web that is used to transmit data.
• Extensible using Headers to send/receive extra information
• Stateless, doesn’t maintain state unless using HTTP cookies to maintain the communication session or state.

HTTPS

S stands for secure, which means communication between client and server will happen via a secure channel using SSL\TLS encryption protocol.

TLS is the successor of SSL. TLS v1.3 is the latest version. The minimum recommended version of TLS is TLS v1.2, which the website should use to maintain a secure website.

HTTP Request Methods

1. GET-Used to retrieve data. We can pass the parameter via query string to retrieve data based on the parameter.
2. POST-Used to submit data within request body. This is usually used to pass personal or confidential data.
3. PUT-Used to edit record to resource server without creating new record.
4. DELETE-Used to delete a record in resource server.

Other methods are PATCH, OPTIONS, HEAD, TUNNEL, TRACE.

Content Types

1. Plain-Data will be sent ‘as-is’ in plain text without any encryption, serialization or encoding.
2. json-Data will be serialize in JSON format when sent from POST or PUT request body.
3. form-url-encoded-This is represented as key-value pair of request parameter that are sent as request body.
4. form-data-Used when uploading form fields that includes file upload. It uploads data in multiple parts. Use it when sending binary or large payload.

Angular - Bind Route Info to Component Inputs (Angular16)

In building Angular application,most of the time we use the Router to render different pages for different urls, and based on the url we also load the data based on its path parameters or query parameters.

In the latest version of Angular v16, we will get a new feature that will simplify the process of retrieving route information in the component and make it way easier.Now we can bind route parameters to the corresponding component’s inputs

You can pass the following data to a routing component’s inputs-

1. Route data — resolvers and data properties
2. Path parameters
3. Query parameters

We will be able to pass the route information to the component inputs, so we don’t need to inject the ActivatedRoute service anymore.

Below are some examples-

Route data — resolvers and data properties

// Routes
const routes: Routes = [
  {
    path: 'about',
    component: MyComponentComponent,
    resolve: { elementId: () => 'elementId1' },
  },
];
// Component Code
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponentComponent implements OnInit {
  @Input() elementId: string = ''; //this will come from the resolved data
  ngOnInit(): void {
    console.log(this.elementId); // get elementId here
  }
}