DEV Community: devashishSarmah

A Dive Into Angular Pipes

devashishSarmah — Sun, 28 Aug 2022 16:45:00 +0000

Pipes are simple functions to use in template expressions to accept an input value and return a transformed value.

For Example:

Here, the pipe firstName will take a fullName as an input and transform it into a First Name. It can be used both in a html and ts file as shown below.

You can check out some of the built-in pipes that Angular provides.

Multiple Parameters in a pipe

A pipe can have multiple parameters. Let’s create a standalone pipe that will construct a string based on the given parameters.

> ng g pipe user-string --standalone --flat --skip-tests

Here, userString pipe requires three parameters provided to it. The parameters needs to be provided in the template expression as shown above.

Lifecycle hooks in a pipe

An Angular pipe only supports OnDestroy lifecycle hook. You can clear out any subscription or data that you might use inside the pipe. Just to make sure there is no memory leaks after the pipe’s instance gets destroyed.
For reference, you can check out the implementation of the async pipe. It uses the OnDestroy hook to unsubscribe any subscription.

Pure and Impure Pipes

By default, pipes are defined as pure so that Angular executes the pipe only when it detects a pure change to the input value.
Pure pipes are memoized, this is why the pipe’s transform method only gets called when any of its input parameter is changed.

So, why does impure pipes exist?

Let’s say you have an array of users which gets processed by the pipe and returns a filtered version of the users.

Now, the users will get filtered on the first run. What if you append a new user to the array? The pure pipe won’t detect the change as the user array itself hasn’t changed.

One of the solution for this is creating a brand new instance of the array whenever a new user gets added. i.e users = [...users, newUser]

Or, you can use an impure pipe

An Impure Pipe is not memoized. It gets evaluated on every change detection cycle irrespective of its input value.

While an impure pipe can be useful, be careful using one. A long-running impure pipe could dramatically slow down your application.

You can implement your own memoization procedure to optimize the impure pipe.

Follow me on Medium or Dev to read more about Angular

Custom Structural Directives in Angular

devashishSarmah — Mon, 06 Jun 2022 18:02:26 +0000

Custom Structural Directives in Angular

In Angular, Structural directives are the directives that can manipulate the DOM. There are a few built-in structural directives that developers uses in almost every angular applications such as *ngIf, *ngFor, *ngTemplateOutlet, etc.

It’s really amazing how the built-in directives works underneath.

The ngFor Structural Directive

The ngFor structural directive takes a iterable collection and renders a template each iteration. The template is the element that the directive is applied on.

For example:

Here, debts is a collection with values such as

For each of the items in debts the element li will get rendered.

The output for the above code is

So, What happens underneath the compilation of ngFor?

A structural directive encloses the element inside a template fragment and the template fragment into a viewContainer.

The statement

gets compiled into this

In simple terms, The ngFor directive gets the collection and renders the templates with specifying their each context.
Each context contains index, $implicit(the particular value of the collection item) and a few other values.

Let’s modify the ngFor directive

Let’s extend the ngFor directive and develope another feature which is filtering.

We want to do something like this

Where myFilter is

We are going to create a directive called ngForIf

Specifying it’s selector

Let’s extend the existing NgFor directive

We need to create our own alternative of ngForOf member. Where we’ll store the iterable collection and use it for filtering. As the _ngForOf member from the NgFor class is private, We can only set a value to it.

Creating the setter for it

Implementing our ngDoCheck lifecycle hook and calling the ngDoCheck of ngFor class

Now, To implement the filtering feature, we will create a predicate type for it

Member for storing the filter method

And finally the setter for the filter. Here, we are checking the availability for _ngForIfOf reference and assigning the filtered values to the ngFor setter of NgFor class.

Don’t forget to provide the instances to the super contructor

Now we can use our custom structural directive with a filter like this.

Output using the ngForIf Directive

You can find the source code at given link: https://stackblitz.com/edit/angular-ivy-uoqa3h

Directives in Angular

devashishSarmah — Mon, 02 May 2022 06:46:36 +0000

Directives in Angular

Directives in angular are kind of utilities that adds additional behaviour to elements.

There are three types of directives

Components
Attribute Directives
Structural Directives

Components as Directives

Every Angular component contains a selector. By using the selector you can include it in other components. A component is a kind of directive which also has a template attached to it.

Attribute Directives

Attribute directives modify the behaviour of other HTML elements, attributes, properties, and components. It can also listen to changes in its host.

You might have come across some built-in attribute directives such as ngClass, ngStyle, ngModel.

Building an attribute directive

Using Angular schematics, We can generate an Angular directive by executing

ng generate directive make-bold

The directive needs to be added to the declarations in the module.

Now, Let’s use the directive. We will use the directive in a paragraph to make the text bold. The way we do it is providing the selector of the directive as a attribute in the element.

To make the text bold, We need to access the paragraph element and set it’s style. We will access the element using ElementRef from @angular/core.

Listening to the host element

We can listen to the host element’s state using the HostListener decorator provided from @angular/core.

Let’s build a directive name ‘hover-border’ that styles an element whenever it is hovered.

Offcourse we can do all these just using CSS classes but to demonstrate the possibilities of an Angular directive, we are styling using the directive.

The hover directive will look something like this. We have used the HostListener to listen to ‘mouseenter’ and ‘mouseleave’ events of the host and change it’s style accordingly.

The host element will look something like this.

The end result:

Passing values into Directives

We can pass values from the host element to the directive. We will use the Input Decorator provided from @angular/core.

Let’s say we want to pass the border color to the hover-border directive. We are gonna create a Input variable name ‘appHoverBorder’ ( same name as the directive selector) and set a default value ‘black’.

We are going to modify the mouseenter procedure to show the border color provided into the directive.

The motive of setting the name of the variable same as the directive selector is to provide the border color to the directive itself.

Now, If we want to another configuration to the directive. Let’s say the border width. We can create another input variable named ‘borderWidth’ in the hover-border directive.

The purpose of creating another variable just for the borderWidth is just demonstrating how to have multiple Input variables in a directive.
Ideally I would create a config variable for the directive. Let’s say { borderColor: string, borderWidth: string}

Using HostBinding to change change host element’s properties

We can bind a particular property of the host to a directive’s variable and change the value directly.

Structural Directives

Structural directives are the directives that can manipulate the DOM Structure.

Angular provides a few built-in structural directives that you may have already come across.

NgIf, NgForOf, NgSwitch etc. See more in Built-in directives

Building a custom structural directive

We are going to create a structural directive which will receive a ‘userRole’ and a set of ‘Roles’. If ‘userRole’ consists in the List of ‘Roles’ then we will show the Element on which we have applied the directive.

Let’s name the directive as ‘if-roles’

ng generate directive if-roles

The usage in an element:

If-role Directive:

We are injecting TemplateRef and ViewContainerRef in the contructor.

templateRef is the element that you have applied the directive to.

viewContainerRef is the container for the element.

So, when you apply a structural directive into an element. A viewContainer get’s created which has to ability to render the element(templateRef) within it’s container.

What about the * before the directive?
The asterisk, *, syntax on a structural directive, such as *ngIf, is shorthand that Angular interprets into a longer form. Angular transforms the asterisk in front of a structural directive into an that surrounds the host element and its descendants.

As you might noticed that you can only specify one value/expression into the directive *directive=”value”

How do we provide some extra context to the directive such as ‘Roles’ in these case?

We are gonna create another Input whose name will be appIfRolesValues

For any secondary Inputs the pattern for their name has to be

{directive}{inputName}

The way we provide the secondary input to the directive is by using this pattern

*directive=”value;inputName”

In our example, we did

*appIfRoles=”’angularDev’; values: [‘angularDev’, ‘webDev’]”

There are a few advanced topics in structural directives such as

Structural directive syntax

Improving template type checking for custom directives

I will be covering these in separate articles.

You can find the source code in given link: https://stackblitz.com/edit/angular-ivy-uoqa3h

I hope this article helped you to get started with Angular directives. If you have any queries or doubts, feel free to reach out to me in the comment box.

Building a dialog(Material) service in angular

devashishSarmah — Wed, 16 Mar 2022 16:29:05 +0000

In angular development, the typical way we open a dialog is by injecting MatDialog directly into a component.

This implementation will be okay for a dialog that will be opened by a single component.
But in the case of a kind of dialog that will be used by many components that belongs to different modules in the application, This approach won't work.

One of the solutions can be a dialog service whose responsibilities will be:

Take the inputs from the component(Which invokes the opening of the dialog).
Opens the dialog and passes the inputs to the dialog or stores the inputs as its member variable.
Returns the dialogRef to the component(Which invokes the opening of the dialog).

A dialog module needs to be created which will hold the dialog Component and other modules that are required in the dialog component.
The components that require to open the dialog will need to import the dialog module first.

The Dialog Module

Importing the dialog module to the dedicated module that the component which will open the dialog resides in (In my case the app module)

The implementation of the open procedure in a component.

We can also send out the data through the method parameter that we have defined in the service for the DialogConfig.

The entire source code is available on: https://github.com/devashishSarmah/dialog-service

Thanks for checking out.
Please feel free to comment for any queries

Standalone Components, directives and pipes in Angular

devashishSarmah — Mon, 20 Dec 2021 18:16:42 +0000

As of you who works with Angular knows that the Angular framework is revolving around the concept of ngModule.

NgModule is currently one of the core concepts in Angular. Developers new to Angular need to learn about this concept before creating even a simple application.

Given this central role of NgModule in Angular it is hard to reason about components, directives and pipes in isolation.

NgModules are the smallest reusable building blocks in Angular, not components.

The current scenario

In today's Angular, whenever we create a component, we need to declare it in a ngModule. Irrespective of its use in other modules.

@Component({...})
export class UserViewComponent {
  constructor(readonly service: UserViewService) {}
}

@NgModule({
 declarations: [UserViewComponent],
  imports: [/* dependencies here */],
  providers: [{provide: UserViewService, useClass: BackendUserViewService}],
})
export class UserViewModule {}

What are the things a standalone component will offer?

A standalone component will basically offer us to create components without creating a ngModule.

It will look something like this.

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

@Component({
  standalone: true,  
  template: `I'm a standalone component!`
})
export class HelloStandaloneComponent {}

There are a bunch of exciting ideas opens up with this concept coming into the picture

When will this feature get released?

Recently the RFC for this feature has been completed
Link

So, We can expect it to get released soon

You can also checkout this prototype link to get an early look of how it's going to be.

This feature is surely going to be a game changer

Thanks for Reading!

Thanks for reading, I hope you enjoyed it!

Server side events using nodeJS

devashishSarmah — Sun, 12 Dec 2021 15:27:37 +0000

Server-Sent Events (SSE) is a technology based on HTTP. On the client-side, it provides an API called EventSource (part of the HTML5 standard) that allows us to connect to the server and receive updates from it.

Let's create a simple chat system

First, we are gonna create a new nodeJS project

Let's name it sse-server

Now, let's initiate npm to install some dependencies

We are gonna add express, body-parser and cors

In index.ts

Configure the middleware

import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

Specify the PORT

const PORT = 3000;

Declare and initialise the required variables

// Contains the connected clients info
let clients: any[] = []; 
// Contains the messages of the network
const messages: any[] = [];

Create a endpoint where the clients will subscribe to events

app.get('/messages', (request: any, response: any) => {
  const headers: any = {
    'Content-Type': 'text/event-stream',
    Connection: 'keep-alive',
    'Cache-Control': 'no-cache'
  };

  response.writeHead(200, headers);

  const data: string = `data: ${JSON.stringify(messages)}\n\n`;

  response.write(data);

  const clientId = (request.query.id ?? 'guest') + '_' + Date.now();

  const newClient: any = {
    id: clientId,
    response
  };

  clients.push(newClient);

  request.on('close', () => {
    console.log(`${clientId} Connection closed`);
    clients = clients.filter((client: any) => client.id !== clientId);
  });
});

A function to notify whenever a new message arrives in the network

const notifyMessageToAllUsers = (userIdWithoutUnderscore: string) => {
  clients
    .filter(
      (client: any) =>
        String(client.id).split('_')[0] != userIdWithoutUnderscore
    )
    .forEach((client: any) => {
      client.response.write(`data: ${JSON.stringify(messages)}\n\n`);
    });
};

Finally an endpoint to push messages to the network

app.post('/message', (request, response) => {
  if (
    request.query.id &&
    request.body &&
    request.body.message &&
    String(request.body.message).trim()
  ) {
    messages.push({
      user_id: request.query.id,
      message: request.body.message.trim()
    });
    notifyMessageToAllUsers(String(request.query.id));
    response.send({ status: 200, error: 'Message Sent Succesfully' });
  } else {
    response.send({ status: 400, error: 'Bad Request' });
  }
});

let's start the server

app.listen(PORT, () => {
  console.log(`Server is listening at http://localhost:${PORT}`);
});

$ npm start

Server console

$ Server is listening at http://localhost:3000

For pushing a message to the network

$ curl --location --request POST 'http://localhost:3000/message?id=1234' \
--header 'Content-Type: application/json' \
--data-raw '{
    "message": "Hi"
}'

To listen to the messages

curl --location --request GET 'http://localhost:3000/messages' \
--header 'Accept: text/event-stream'

After subscribing to the endpoint, we should be able to see the message that was pushed earlier

$ data: [{"user_id":"1234","message":"Hi"}]

Conclusion

SSE is very powerful in terms of receiving events from the server to achieve real-time behaviour in the client. But it can get very expensive if it's not implemented efficiently.

Thanks for Reading!

Thanks for reading, I hope you enjoyed it!