Forem: Dhananjay Kumar

Step by step, use Ocelot as an API Gateway in the .NET Core.

Dhananjay Kumar — Mon, 20 May 2024 03:14:05 +0000

An API Gateway is a front-end server for APIs, handling incoming API requests and routing them to the appropriate backend services. It plays a crucial role in microservice architecture by offering a single entry point to the system.
Some main functionalities of an API Gateway are,

Routing
Authentication
Authorization
Request Composition
Caching
Load Balancing
Fault Tolerance
Service Discovery

There are many popular choices for API Gateway in.NET Core-based Microservices, such as,

Ocelot
YARP and others. This blog post explains how Ocelot can be an API Gateway in .NET Core APIs.

Setting up APIs

There are two APIs. The first API has a ProductController with two EndPoints.



  [Route("api/products")]
    [ApiController]
    public class ProductController : ControllerBase
    {
        static List<Product> Products = new List<Product>()
        {
            new Product { Id = 1, Name = "Product 1", Price = 10.0m },
            new Product { Id = 2, Name = "Product 2", Price = 20.0m },
            new Product { Id = 3, Name = "Product 3", Price = 30.0m }
        };
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Product>>> Get()
        {
            var products = await GetProductsAsync();
            await Task.Delay(500);
            return Ok(products);
        }


        [HttpPost]
        public async Task<ActionResult<Product>> Post(Product product)
        {
            Products.Add(product);
            await Task.Delay(500);
            // Return the product along with a 201 Created status code
            return CreatedAtAction(nameof(Get), new { id = product.Id }, product);
        }

        private Task<List<Product>> GetProductsAsync()
        {

            return Task.FromResult(Products);
        }
    }

These EndPoints are available at **http://localhost:5047/api/products **for both GET and POST operations.
The second API has InvoiceController with just one EndPoint.



    [Route("api/invoice")]
    [ApiController]
    public class InvoiceController : ControllerBase
    {
        [HttpGet]
        public async Task<ActionResult<IEnumerable<string>>> Get()
        {
            await Task.Delay(100);
            return new string[] { "Dhananjay", "Nidhish", "Vijay","Nazim","Alpesh" };
        }
    }

The EndPoint is available at http://localhost:5162/api/invoice for the GET operation.

Setting up API Gateway

We are going to set up the API Gateway using Ocelot. For that, let's follow below steps:

Create an API project.
Do not add any controller to that.

Very first, add the Ocelot package from Nuget to the project.

After adding the Ocelot package, add a file named ocelot.json to the API Gateway project.



{
  "GlobalConfiguration": {
    "BaseUrl": "http://localhost:5001"
  },
  "Routes": [
    {
      "UpstreamPathTemplate": "/gateway/products",
      "UpstreamHttpMethod": [ "GET" ],
      "DownstreamPathTemplate": "/api/products",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 5047
        }
      ]
    },
    {
      "UpstreamPathTemplate": "/gateway/invoice",
      "UpstreamHttpMethod": [ "GET" ],
      "DownstreamPathTemplate": "/api/invoice",
      "DownstreamScheme": "http",
      "DownstreamHostAndPorts": [
        {
          "Host": "localhost",
          "Port": 5162
        }
      ]
    }
  ]
}

Let us explore each configuration in the above file.

In the GlobalConfiguration section, the BaseUrl is the URL of API Gateway. API clients would interact with this URL. When running the API Gateway project, it should run on this base URL
The Routes section contains various routes in the array
The Routes have UpStream and DownStream sections.
The UpStream section represents the API Gateway
The DownStream section represents the APIs.

Above configuration can be depicted in below diagram:

By the above configuration, when you hit the EndPoint http://localhost:5001/gateway/products , it would be redirected to API EndPoint http://localhost:5047/api/Products

Next in the Program.cs, at the App Gateway startup, add the configuration below.




builder.Configuration.AddJsonFile("ocelot.json", optional: false, reloadOnChange: true);
builder.Services.AddOcelot(builder.Configuration);

app.UseOcelot();

Now run the API Gateway application, and you should be able to navigate the Private APIs. Besides GET, Ocelot also supports other HTTP Verbs. A route for POST operations can be added as shown below.



{
  "UpstreamPathTemplate": "/gateway/products",
  "UpstreamHttpMethod": [ "POST" ],
  "DownstreamPathTemplate": "/api/products",
  "DownstreamScheme": "http",
  "DownstreamHostAndPorts": [
    {
      "Host": "localhost",
      "Port": 5047
    }
  ]
},

Using basic configurations, you should be able to read the HttpContext object, headers, and request objects in the private API.

I hope you find this blog post helpful. Thanks for reading it.

Reading Request Headers Across Multiple .NET Core API Controllers

Dhananjay Kumar — Sat, 04 May 2024 12:47:16 +0000

I was working on creating a .NET Core-based API and came across a requirement to read a particular request header across the API controllers. To understand it better, let us say there are two API controllers,

InvoiceController 2. ProductController

We need to read the value of a particular Request Header in both controllers.

To do that, add a middleware class; I am naming it RequestCodeMiddleware, as we will read a request header named- “Request-Code.”

public class RequestCodeMiddleware
{
    private readonly RequestDelegate _next;
 
    public RequestCodeMiddleware(RequestDelegate next)
    {
        _next = next;
    }
 
    public async Task Invoke(HttpContext context)
    {
        // Read the request code here. This is just an example, replace it with your actual logic.
        var requestCode = context.Request.Headers["Request-Code"].FirstOrDefault();
        // Add the request code to the HttpContext
        context.Items["RequestCode"] = requestCode+"middle ware";
        // Call the next middleware in the pipeline
        await _next(context);
    }
}

After creating the middleware class, register it to the API handling pipeline by adding the below code,


if (app.Environment.IsDevelopment()) {     
     app.UseSwagger();     
app.UseSwaggerUI(); 
} 
app.UseMiddleware<RequestCodeMiddleware>(); app.UseHttpsRedirection(); 
app.MapControllers(); 
app.Run();

Now, you can read the request header in a ProductController’s GET Action, as shown below.

public class product : ControllerBase
{
   
    [HttpGet]
    public string Get()
    {
        var requestCode = HttpContext.Items["RequestCode"] as string;
        return requestCode;
    }
}

So far, so good; however, there is still a challenge: the above code must be duplicated to read the request header in the multiple Actions. To avoid that, we can read it inside the controller’s constructor; however, HttpContext is unavailable inside a controller’s constructor.

Another approach is to use IHttpContextAccesor.

To use IHttpContextAccesor, register it in the API startup pipeline as shown below,

builder.Services.AddHttpContextAccessor();

Now, in the InvoiceController's constructor, you can inject IHttpContextAccesor to read the request header, as shown in the code listing below.

public class invoice : ControllerBase
    {
 
        private readonly IHttpContextAccessor _httpContextAccessor;
        private string _requestCode;
 
        public invoice(IHttpContextAccessor httpContextAccessor)
        {
            _httpContextAccessor = httpContextAccessor;
            _requestCode = _httpContextAccessor.HttpContext.Items["RequestCode"] as string;
        }
 
     // Your action methods..
     // GET: api/<invoice>
        [HttpGet]
        public string Get()
        {
            return _requestCode;
        }
      }

In this way, we can read a request header in multiple controllers. I hope you find this post helpful. Thanks for reading.

Getting Started with Qwik

Dhananjay Kumar — Fri, 12 May 2023 03:09:39 +0000

As I write this blog post, Qwik Version 1.1 has been announced. You'll be able to learn about the announcement here.

https://www.builder.io/blog/qwik-v1

Repository – https://github.com/BuilderIO/qwik

This post does not discuss the advantages of the Qwik framework, such as Resumebility, Reactivity, etc., as there are already many discussions on the web. Instead, in this post, directly, you will jump to building and creating a fundamental QWIK app.

Let us jump in. You can just run the commands below on your terminal precisely how you run any CLI commands. You must have NodeJS version 16.8 and above installed to run these commands.

npm create qwik@latest

Qwik will ask you specific questions, such as

The app directory name.
Project template. (For this Basic App with QWIKCITY)
npm library installation option
git init option

Provide a name for the app, and then press enter to choose default options. After successful executions of all commands, you should get a message as shown in the below image,

Next, navigate to the project folder, and you should be able to see the project structure as shown in the following image,

Open the index.tsx file and replace the code with the below code.

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  const title = "My First QWIK App";
  return(
    <div>{title}</div>
  )
});

Now run your first QWIK application with the command,

npm run start

It would be best if you got the output as shown in the below image,

The Qwik works on directory-based routing. In the routes folder, you can see a file called layout.tsx. This file has three sections,

As you might have guessed correctly, the Header and Footer are two components, and in the Slot section on the route change, a component would be projected and lazy loaded.

In the layout file, if you comment and , you should get the output as shown in the following image,

QWIK uses QWIK CITY, a directory-based routing framework that can download minimal JavaScript with fine-grained lazy loading. Add a new directory in the routes folder to add a new route. You can create various routes by creating different subfolders, as shown below,

src/routes/product

src/routes/product/[id]

src/routes/greet

Inside the product and greet folder, add a file with the name index.tsx, and inside that file, put the below code.

import { component$ } from "@builder.io/qwik";
export default component$(()=>{

    return(
        <h1>Greetings</h1>
    )
})

When you navigate to the – http://127.0.0.1:5173/greet/ , you should get the greet component laded as below,

When you navigate to the – http://127.0.0.1:5173/product/ , you should get the product component laded as below,

I will cover Qwik Routing in detail in other posts. However, quickly, you can create a route with a parameter. For example, to create a route with an id parameter, add a subfolder with [id] name inside the product folder and put an index inside that .tsx file.

You can read the id using the useLocation hook, as shown in the next code listing:

import { component$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";

export default component$(()=>{

    const loc = useLocation();
    return(
        <h1>{loc.params.id} </h1>
    )
})

When you navigate to – http://127.0.0.1:5173/product/7/, you should get the product component laded as below,

Another essential task in a web application is fetching data from the API. Qwik makes working with API very easy. To fetch data from API, you can use routeLoader$, which is of type LoaderConstructor.

export const useTodo =  routeLoader$(async ()=>{
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/',{
        headers:{Accept:'application/json'}
    });
    return await res.json()
})

Now you can use custom made useToDo hook in the component as below,

export default component$(()=>{

    const list = useTodo();
    return(
        <>
        <h1>To Do</h1>
        <table>
            <thead>
                <tr>
                <th>Id</th>
                <th>Task</th>
                <th>Status</th>
                </tr>
            </thead>
            <tbody>
            {list.value.map((item:any, index:any) => (
              <tr key={`items-${index}`}> 
                 <td>{item.id} </td>
                 <td> {item.title}</td>
                 <td>{item.completed + ''}</td>
             </tr>
            ))}
            </tbody>
        </table>
        </>
    )
})

Putting everything together in the component, you can fetch data from the API and render it in a table, as shown below:

import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";

export const useTodo =  routeLoader$(async ()=>{
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/',{
        headers:{Accept:'application/json'}
    });
    return await res.json()
})

export default component$(()=>{

    const list = useTodo();
    return(
        <>
        <h1>To Do</h1>
        <table>
            <thead>
                <tr>
                <th>Id</th>
                <th>Task</th>
                <th>Status</th>
                </tr>
            </thead>
            <tbody>
            {list.value.map((item:any, index:any) => (
              <tr key={`items-${index}`}> 
                 <td>{item.id} </td>
                 <td> {item.title}</td>
                 <td>{item.completed + ''}</td>
             </tr>
            ))}
            </tbody>
        </table>
        </>
    )
})

You can see the data rendered in a table as shown below:

As with other frameworks, Components are the basic building blocks of Qwik. They are a reusable piece of code. In Qwik, a component is a function that returns a JSX. You can create a component,

By adding a folder with the name of the component
Inside that, add a file with a name index or component name.
Add style with the component.module.css file.

If you wish to create a greet component, add a folder greet; inside that, add an index.tsx or greet.tsx

In the Greet component, you can apply the CSS from the greet.module.css file as shown in the next code listing:

import { component$ } from "@builder.io/qwik"
import styles from './greet.module.css';

export default component$(() => {

    const title = "Greeting "

    return (
        <>
           <div class={styles['abc']} >{title}</div>
        </>
    )
})

Next, you can use the Greet component on Index as below,

import { component$ } from '@builder.io/qwik';
import Greet from '../components/greet/greet'

export default component$(() => {
  const title = "My First QWIK App";
  return(
    <>
    <div>{title}</div>
    <Greet/>
    </>
  )
});

Some characteristics of Qwik components are,

Qwik components get broken down into lazy-loaded chunks
Qwik components are resumable
Qwik components are reactive

I will cover more about the components and other concepts of QWIK in the following posts. I hope you will like working with QWIK and like this starter post. Thanks for reading it.

Hello Angular 16

Dhananjay Kumar — Sat, 06 May 2023 05:55:21 +0000

On 3rd May 2023, Angular 16 is launched. Some of the essential features of Angular 16 are,

Improved standalone APIs
Angular Signals
takeUntillDestrory RxJS operator
DestroyRef as an injectable provider
Required input properties for directives
Passing router data as a component input
Self-closing tags
ES Build support
Nondestructive hydration for SSR
Unit Testing with Jest
Support for TypeScript 5.0
ngTemplateOutlet strick type checking
Configure zonejs (ngZone) in bootstrapApplication and many more.

Read the official announcement here: https://blog.angular.io/angular-v16-is-here-4d7a28ec680d

To play around, Let us start with updating to Angular 16.

**npm uninstall -g @angular/cli

npm install -g @angular/cli@latest**

After upgrading to Angular 16, you can create a Standalone Angular application using the CLI Command,

ng new myapp –standalone

In the new project structure, you can see that there are no modules, and there is one new file named app.config.ts

The app.config file contains the providers that should be available to the root component and all its children in a standalone Angular application.



import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes) ]
};

In the main.ts file, you can see that application is bootstrapped using AppComponent and the configuration from appConfig



bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Here AppComponent is a standalone component used as a root component to bootstrap the application.



import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';
}

You can notice in the AppComponent,

Its standalone property is set to true
It’s all dependencies are passed inside the imports array You can add new components to the application using the ng g c name command. Since the application is configured for standalone API, the newly created component would be a standalone component. Add a new component in the application,

ng g c product

To use ProductComponent inside the AppComponent, add it as a dependency in the imports array.



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, 
    RouterOutlet, 
    ProductComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';
}

If a standalone component depends on a module, you pass that module in the imports array of the component. For example, in the ProductComponent, you can pass ReactiveFormsModule as a dependency, as shown in the following code block,



@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {

  fb = inject(FormBuilder);
  login : FormGroup; 
  constructor(){
    this.login = this.fb.group({
      email:[],
      password:[]
    })
  }
}

I have written a detailed article on standalone components. For deep dive, read it here –

https://www.telerik.com/blogs/angular-14-introducing-standalone-components

As of now, you have created an Angular 16 app configured to work with standalone APIs. As discussed, Angular 16 comes with many exciting features, and one such feature is compile time required input check or required @Input properties to a component



export class ProductComponent {

  @Input({required:true}) message?: string;

While using this component, Angular complains about if you do not pass the message property value.

Required input implies that the directive can’t work without them. Read more about required @Input properties here:

https://debugmode.net/2023/04/17/required-input-properties-in-angular/

Another exciting feature of Angular 16 is fine-grained reactivity with the signal. A signal is a function to create reactive values.

You can create a signal as shown below.



count = 1; 
  counter = signal(this.count); 

  constructor(){
    effect(()=>{
      console.log(this.counter())
    })
  }

  setCount():void{
    this.counter.update(count => count + 1);
  }

You can learn more about signals here –

https://github.com/angular/angular/discussions/49683

Angular 16 has many exciting features, new enhancements, and capabilities to write a scalable, performant Angular app. In further posts, I will write more details about Angular 16 features. I hope you like this blog post. Thanks for reading.

What is the purpose of the Second Parameter in creating an Angular Signal

Dhananjay Kumar — Sat, 06 May 2023 02:59:39 +0000

The angular signal() function creates a signal. This function takes two input parameters.

Initial value
Optional Equality function.
By default, Angular executes the code of effect() even if the signal is set or updated with the same value. How can we avoid that?

By leveraging the second parameter of the signal() function.

Let us first understand the problem statement through an example.

Angular provides the signal function to create a signal. You can create a signal as shown next,



product : IProduct = {
    Id:  "1",
    Title:"Pen",
    inStock: true,
    Price : 100

  }
  Product$ = signal<IProduct>(this.product);

You can use the Product$ signal by calling it a function on the template.



<h2>{{Product$() | json}}</h2>
<button (click)="setProduct()">Set Products</button>

An angular signal provides a set method to replace its value with the new value. This method removes the older value and sets the new value in the signal. In the setProduct function, update the signal with a new value as shown below,



setProduct(){
   let p : IProduct = 
      {
        Id:"1",
        Title:"Pen",
        Price: 300,
        inStock: true
      }; 
    this.Product$.set(p);
  }

As you see, calling the setProduct function sets the signal with the same product each time.

Angular Signal has another concept called Effect. Angular calls the effect() function each time the signal changes or emits a new value. So let us say you need to run a set of code; when the signal changes, you put that code in effect.



  productEffect = effect(()=>{
     console.log('effect called'); 
     console.log(this.Product$());
  });

In the productEffect effect(), we are printing the value of the Product$ signal. You may observe that,

Each time you click the button, the signal changes and is set with the same product.
It is the same product set to the signal, but the signal emits it.
Each time you click the button, the code in effect() is executed even though the signal emits the same product value.

Each time you click the button, the code in effect() is executed even though the signal emits the same product value. THIS IS THE PROBLEM, and it can be fixed by passing a second parameter in the signal function() while creating the signal.

The signal function takes two input parameters,

Initial value
Optional Equality function.

The signal function is declared as below,



export declare function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): WritableSignal<T>;

As you see that you can pass the options. The type of options is CreateSignalOptions, which is defined below,



export declare interface CreateSignalOptions<T> {
    /**
     * A comparison function which defines equality for signal values.
     */
    equal?: ValueEqualityFn<T>;
}

The CreateSignalOptions has a method named equal. You can pass this equal function as the second parameter. The function can write logic to determine when the signal notifies and emits.

You can create the equal function as shown in the following code block:



function signalEquality(a:IProduct, b: IProduct) {
  console.log("hello") // it executes each time
  if(JSON.stringify(a)=== JSON.stringify(b)){
    return true;
  }
  return false; 
}

You can pass the above function as the value of the equal function while creating the signal.



 Product$ = signal<IProduct>(this.product,{equal:signalEquality});

Now each time you click the button, the code in effect() is only executed when the signal() is set with a new value and emitting it.

I hope you understand the purpose of the second parameter in creating a signal in Angular. Thanks for reading.

Interface Segregation Principle in TypeScript

Dhananjay Kumar — Fri, 28 Apr 2023 09:07:09 +0000

The interface Segregation Principle is one of the fundamental principles of the SOLID principle. It says to keep the interface as small as possible. In the words of Uncle Bob, Keep interfaces small so that classes don’t end up depending on things they don’t need.

To understand the problem, say there is an interface IVehicle with two methods.

export interface IVehicle{
    drive():void; 
    fly():void; 
}

Two classes, Car and Plane, implement the IVehicle interface. The Car class uses the interface as shown in the next code block,

import { IVehicle } from "./interface/vehicle.interface";
 
export class Car implements IVehicle{
 
    drive(): void {
        console.log('can drive');
    }
    fly(): void {
        throw new Error('Method is not implemented.'); 
    }
}

Since a car cannot fly, the Car class is forced to implement the fly method, and for that, in the TypeScript, we are throwing an error with the message that Method is not implemented.

The Plane class uses the interface as shown in the next code block,

import { IVehicle } from "./interface/vehicle.interface";

export class Plane implements IVehicle{
 
    drive(): void {
        throw new Error("Method is not implemented.");
    }
 
    fly(): void {
        console.log('you can fly a plane')
    }
 
}

Since a plane cannot drive, the Plane class is forced to implement the drive method, and for that, in the TypeScript, we are throwing an error with the message that Method is not implemented.

The above implementation violates SOLID’s ISP principle.

To adhere to the Interface Segregation Principle, refactor the IVehicle interface in two different interfaces.

ICar interface
IPlane interface

export interface ICar{
    drive():void;  
}

The ICar interface contains only the drive function, and the IPlane interface includes only the fly function.

export interface IPlane{
    fly():void; 
}

The Car and Plane classes implement these two interfaces ICar and IPlane, respectively.

import { ICar } from "./interface/car.interface";
 
export class Car implements ICar{
 
    drive(): void {
        console.log('you can drive a car');
    }
}

And the Plane class implements the IPlane interface,

import { IPlane } from "./interface/plane.interface";
 
export class Plane implements IPlane{
 
    fly(): void {
        console.log('you can fly a plane')
    }
 
}

In this implementation,

Interface is small
The class that implements the interface is not forced to implement any method it does not need.
The class is not violating the Single Responsibility Principle.

After refactoring to the Interface Segregation Principle, interfaces and classes are in a one-to-one relationship and adhere to the Single Responsibility Principle.

If there is a super vehicle that flies and drives both, that can implement both interfaces.

import { ICar } from "./interface/car.interface";
import { IPlane } from "./interface/plane.interface";
 
export class SuperVehicle implements ICar,IPlane {
 
    fly(): void {
        console.log('can fly');
    }
    drive(): void {
        console.log('can drive'); 
    }
 
}

In the above implementation, as we have created specific interfaces, classes never implement the interfaces it does not need.

I strongly recommend using SOLID principles while working with TypeScript in Angular or node applications. I hope you find this post helpful. Thanks for reading.

How to check the status of an Angular Reactive Form’s Control

Dhananjay Kumar — Wed, 26 Apr 2023 03:51:37 +0000

Sometimes, you may have a requirement to do something when the status of an Angular form control changes. For example, you have a Login Form, and when the status of the Email control changes from valid to invalid and vice versa, you need to perform some actions. In this post, let us see how we can achieve that.

We have a login form,

fb = inject(FormBuilder);
loginForm: FormGroup;

  constructor() {

    this.loginForm = this.fb.group({
      email: [null, [Validators.required]],
      password: [null, [Validators.required]],
    })

 }

On the template, map the loginForm to the HTML Form element and FormControls to the input elements.

<form (ngSubmit)="login()" [formGroup]="loginForm" novalidate>
<input type="text" formControlName="email" placeholder="Enter email" />
<br/>
<input type="password" formControlName="password" placeholder="Enter Password"/>
<br/>
<br/>
<button>Login</button>
</form>

Now whenever the status of the email field changes, you need to take some action. For that, Angular AbstractControlDirective provides a getter of an observable type called statusChanges().

You can subscribe to the statusChanges() observable to work with the control’s status change.

checkControlStatus(){
    const email = this.loginForm.get('email'); 
    email?.statusChanges.subscribe((status:any)=>{
       console.log(status);
    })
  }

And further, call the above function In the ngOnInit() life cycle hook.

ngOnInit(): void {
    this.checkControlStatus();
  }

You can check the status for valid or invalid and apply conditional css or log to the API etc. I hope you find this post helpful. Thanks for reading.

How to Lazy and Dynamically Load a Component in Angular

Dhananjay Kumar — Fri, 21 Apr 2023 04:53:26 +0000

There are three ways you can use a component in an Angular app.

Loading on route change
Using as a child component
Dynamically loading on demand

However, this article focuses on loading a component dynamically and lazily. The main advantage of lazily loading a component is reducing the initial bundle size and only downloading the component in the browser when required.

Let us say that you have a component called GreetComponent, as shown in the next code block,

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
 
const template = `
   <h2>{{message}} </h2>
   <button (click)='sendMessage()'>Send Message </button>
`
@Component({
  selector: 'app-greet',
  standalone: true,
  imports: [CommonModule],
  template: template
})
export class GreetComponent {
  @Input({ required: true }) message?: string;
  @Output() messageEvent = new EventEmitter<boolean>();
  sendMessage(): void {
    this.messageEvent.emit(true);
  }
}

The GreetComponent has an @Input decorated property and an @Output() decorated EvenEmmiter. The FooComponent uses it as a child component, as shown in the following code block.

const template = `
   <app-greet [message]='message' (messageEvent)='sendMessage($event)'></app-greet>
`
@Component({
  selector: 'app-foo',
  standalone: true,
  imports: [CommonModule,
    GreetComponent],
  template : template
})
export class FooComponent {
   message = "data from parent"
 
   sendMessage(m:boolean){
      console.log(m);
   }
}

A couple of points worth noticing here are,

GreetComponent is part of the imports array.
GreetComponent is used on the template.

Due to the above two points, whenever Angular compiles FooComponent, it also includes GreetComponent, increasing the size of the bundle containing the FooComponent.

*One main advantage of loading a component dynamically (lazily) is that it reduces the bundle size because it only gets downloaded in the browser when required. *

Let us say that, GreetComponent should be loaded dynamically and lazily with the click of a button in the FooComponent. For that,

Add a button
Remove from the template of FooComponent
Remove GreetComponent from the imports array. [Important]

const template = `
   <button (click)='loadComponent()'>Load Greet Component </button>
`
@Component({
  selector: 'app-foo',
  standalone: true,
  imports: [CommonModule],
  template: template
})
export class FooComponent {
  message = "data from parent"
  greetcomp: any;

To dynamically load the component, inject the ViewContainerRef using the inject function or the constructor injection.

vcr = inject(ViewContainerRef);

After that, import the file that contains GreetComponent using the import statement. The import statement is used in JavaScript to load a file dynamically.

const { GreetComponent } = await import('../greet/greet.component');

After importing the file, use the CreateComponent method of ViewContainerRef.

this.greetcomp = this.vcr.createComponent(GreetComponent);

You can access all properties and events of the dynamically loaded components using the instance method. So the a value can be passed to the message property as shown in the next code block,

this.greetcomp.instance.message = "Hello dynamic Component";

You can subscribe to the @Output decorated EventEmitter as shown next,

this.greetcomp.instance.messageEvent.subscribe((data:any)=>{
        console.log(data);
      })

Putting everything together, you can lazy load a GreetComponent with the click of a button in the FooComponent, as shown in the following code listing,

const template = `
   <button (click)='loadComponent()'>Load Greet Component </button>
`
@Component({
  selector: 'app-foo',
  standalone: true,
  imports: [CommonModule],
  template: template
})
export class FooComponent {
  message = "data from parent"
  greetcomp: any;
  vcr = inject(ViewContainerRef);
  
  async loadComponent() {
    this.vcr.clear();
    const { GreetComponent } = await import('../greet/greet.component');
    this.greetcomp = this.vcr.createComponent(GreetComponent);
    if (this.greetcomp) {
      this.greetcomp.instance.message = "Hello dynamic Component";
 
      this.greetcomp.instance.messageEvent.subscribe((data:any)=>{
        console.log(data);
      })
    }
 
  }
}

Currently, Angular loads GreetComponent at the end after all DOM elements of FooComponent. To load it at a specific div block, read the div block as ViewChild and ViewConatinerRef. In the other post, I will cover that in detail.

I hope you find this post helpful. Thanks for reading.

Angular 16 REQUIRED Input Properties

Dhananjay Kumar — Tue, 18 Apr 2023 04:13:38 +0000

Angular 16 adds a new feature of making an @Input() decorated property REQUIRED, which means that to use that component, the value of the required property has to be passed.

@Input({required:true}) title? :string;

To Understand it, let us assume that you have a component named ProductComponent with @Input() decorated properties as shown below,

const template = `
   <p>title : {{title}}  price : {{price}} </p>  
`
@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule],
  template : template
})
export class ProductComponent {
 
  @Input() title? :string; 
  @Input() price? : string; 
 
}

We are using ProductComponent inside AppComponent, as shown below.

import { Component } from '@angular/core';
 
const template = `
<app-product [title]="title"></app-product>
`
@Component({
  selector: 'app-root',
  template : template
})
export class AppComponent {
  title = "Pen"; 
}

As you notice here is that we are,

· Passing value to the title property
· Not passing value to the price property.

In the output, you can see that value of the title is printed, whereas the value of the price is rendered empty.

We can use the ProductComponent without passing the value of all input decorated properties, and Angular does not complain about that. Now let us say that we have a requirement that,

*The price property is a required property to use the ProductComponent. *

Starting Angular 16, we can make an @Input() decorated property as the required property. As you see Input interface has an optional, required boolean property.

We can use the required property to make an @Input() decorated property required, as shown below,

You can create a component with a combination of required and optional properties, as shown below,

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
 
const template = `
   <p>title : {{title}}  price : {{price}} </p>  
`
@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule],
  template : template
})
export class ProductComponent {
 
  @Input() title? :string; 
  @Input({required:true}) price? : string; 
 
}

And Angular complains about when you try using the ProductComponent without passing value for price property.

To use the ProductComponent, you must pass the value of the required @Input() decorated property as shown in the next code block,

import { Component } from '@angular/core';
 
const template = `
<app-product [title]="title" [price]="price"></app-product>
`
@Component({
  selector: 'app-root',
  template : template
})
export class AppComponent {
  title = "Pen"; 
  price = "100"; 
}

This way, you can make an @Input() decorated property as required. I hope you find this post helpful. Thanks for reading.

The simplest way to disable console.log for Production build in Angular?

Dhananjay Kumar — Wed, 06 Apr 2022 06:02:34 +0000

I work with different developers, and most of them rely on console.log () or other console methods for development. They use the console to print various values to debug while doing the development. I call this approach console-driven development. Cool name, right?

These console functions become overwhelming in production as users can see many things printed in the browser console, which they may or may not understand. Sometimes a junior developer can leave something significant on the console that may cause a potential security risk.

So, we must not have the console in the productions. There are various ways you can disable console in the production, such as:

By using libraries such as logger
Creating a linting rule that if code contains any console function, the build fails
Or you are writing a simple service to perform this task for you.

In this post, let us see how we can create service to disable the console in the production step-by-step.

Add service to the project. I am calling it as ConsoleToogleService. In the service, we make all the console functions void. So service should look like the below:

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ConsoleToggleService {

  constructor() { 

  }

  disableConsoleInProduction(): void {
    if(environment.production){
      console.warn(`🚨 Console output is disabled on production!`);
      console.log = function():void{}; 
      console.debug = function():void{};
      console.warn = function():void{};
      console.info = function():void{};
    }
  }
}

In the service, you can see a function called disableConsoleInProduction(). Inside this function, we are making all the console functions void. It is as simple as this.

Now in the AppComponent, inject this service and call the function in the constructor as shown below:

  constructor(private consoleToggleService : ConsoleToggleService){

    this.consoleToggleService.disableConsoleInProduction();

  }

When you build an application for production, you won’t have any console. However, the development console will work as usual.
I hope you find this post helpful. Thanks for reading.