DEV Community: Manoj Prasanna 🚀

Angular: Micro Frontend (Module Federation)

Manoj Prasanna 🚀 — Fri, 26 Jul 2024 17:49:12 +0000

In this article, we will explain the micro frontend architecture in Angular and how to build it in an application.

In modern web development, the concept of micro frontends is gaining significant traction. Just as microservices revolutionized backend architecture, micro frontends bring similar benefits to the front end. This article explores what micro frontends are, their benefits, and how they can be implemented using Angular.
First Let's talk about the micro-Frontend

What's a micro-frontend?

Micro frontends are an architectural style where a frontend application is decomposed into smaller, semi-independent modules. Each module, or micro frontend, is developed, tested, and deployed separately, often by different teams. This modular approach allows for more flexibility, scalability, and maintainability.
Module Federation allows applications to load and share modules and their dependencies at runtime. This helps apps share code and resources, which reduces duplication and improves performance and development.

Now that you have a basic understanding of micro frontends, let's explore the types of applications that implement this architecture.

Where do we can use micro-frontend?

Micro frontend architecture can be implemented in various types of applications, especially those that benefit from scalability, flexibility, and independent deployment. such as

E-commerce Platforms:
Sites like Amazon or eBay, where different teams manage different parts of the site (e.g., product pages, search functionality, user profiles, and checkout processes).
Social Media Networks:
Platforms like Facebook or LinkedIn, where different features like news feeds, messaging, and notifications are handled by separate teams.

Implementing Micro Frontends with Angular

There are several methods to implement a micro-frontend application.

Iframe-Based:
Simple but limited in terms of interaction and performance.
Web Components:
Custom elements that are encapsulated and reusable.
Build-Time Integration:
Combining micro frontends during the build process.
Run-Time Integration:
Loading and integrating micro frontends at runtime, often using module federation in Webpack.

Here’s a step-by-step explanation of how you can implement Micro Frontends in Angular using Module Federation

Step 1: Set up the Main Application Shell

Create an Angular project using the Angular CLI
ng new shell-app --routing

Step 2: Configure Webpack Module Federation

install the dependencies

npm install @angular-architects/module-federation --save-dev

Add Module Federation configuration to webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      remotes: {
        mfe1: "mfe1@http://localhost:4201/remoteEntry.js",
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"],
    }),
  ],
};

Step 3: Setting Up Micro Frontend Applications

Each micro frontend is an Angular application.
Initialize Micro Frontend Project:
ng new mfe1 --routing

Configure Webpack Module Federation
Add Module Federation configuration to webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:4201/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "mfe1",
      filename: "remoteEntry.js",
      exposes: {
        './Module': './src/app/feature/feature.module.ts',
      },
      shared: ["@angular/core", "@angular/common", "@angular/router"],
    }),
  ],
};

Expose Angular Modules
Expose the necessary modules in your micro frontend's webpack.config.js and ensure they are correctly set up to be consumed by the shell application.

Step 3: Integrate Micro Frontends into Shell

Load Remote Modules
Modify app-routing.module.ts in the shell application to load remote modules

const routes: Routes = [
  {
    path: 'mfe1',
    loadChildren: () => import('mfe1/Module').then(m => m.FeatureModule)
  }
];

Bootstrap Applications
Ensure both the shell and micro frontend applications are served and accessible.

Step 4: Running and Testing

Serve Applications
ng serve --project shell-app ng serve --project mfe1

Access the Shell Application
Navigate to http://localhost:4200 and verify that the micro frontend is integrated correctly.

Conclusion
Micro frontends with Angular provide a robust solution to manage large-scale, complex web applications. By breaking down a monolithic frontend into smaller, manageable pieces, teams can work more efficiently and deploy independently. While the architecture introduces some complexities, the benefits in terms of scalability, flexibility, and maintainability often outweigh the challenges. By carefully planning and implementing micro frontends, organizations can achieve a more resilient and scalable frontend architecture.

Thanks for reading the whole story ❤

Angular Change Detection and OnPush Strategy 🚀

Manoj Prasanna 🚀 — Tue, 15 Aug 2023 18:17:28 +0000

In this article, I will delve into the concept of Change Detection and the functionality of the OnPush strategy within the Angular framework.

Understanding Angular Change Detection

Have you ever encountered a scenario where your Angular application required automatic updates upon detecting the necessity for a change? If that's the case, you likely implemented Angular's Change Detection mechanism, specifically the OnPush strategy. This strategy proves to be highly efficient in swiftly detecting changes, particularly for value type.Let jump to understand about this change detections.

While this approach ensures accuracy, it can lead to performance bottlenecks in complex applications

When you make any changes to your model in the application, Anulgar will detect the changes and immediately update the view.Angular's change detection mechanism ensures continuous synchronization (Two way data binding) between the underlying models and their respective views.
Let know about in angular can change as a result of any of the following sceniors.

DOM Event
AJAX HTTP requests
Timers(SetInterval() , SetTimer())

Understaning about the Angular change detaction cycle

Angular's change detection cycle is a critical part of how the framework updates and synchronizes the DOM with your application's data. It's responsible for detecting and propagating changes from your application's data model to the user interface. Understanding the change detection cycle is important for optimizing your application's performance and avoiding unnecessary updates.

Suppose we have a simple Angular component called devCounterComponent that displays a counter value and a button to increment it

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

@Component({
  selector: 'app-dev-counter',
  template: `
    <div>
      <p>Counter: {{ counter }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class DevCounterComponent {
  counter = 0;

  increment() : void {
    this.counter++;
  }
}

Now, let's follow the change detection cycle with above example.

Initialization:
When the application starts, Angular initializes the DevCounterComponent.
Rendering Initial View:
The initial view is rendered, showing the counter value as 0 and the "Increment" button.
Event Handling and Data Binding:
When the user clicks the "Increment" button, the increment() method is triggered.
Change Detection Triggers:
The increment() method changes the value of the counter property.
Change Detection Process:
Angular's change detection system detects the change in the counter property and starts the change detection process.
Checking Components for Changes:
Angular checks the DevCounterComponent for changes. It compares the new value of the counter property (1) with the previous value (0).
Updating the DOM:
Since there is a change in the counter property, Angular updates the DOM to reflect the new value. The counter value displayed in the template is now 1.
Child Components:
In this example, there are no child components, so this step is skipped.
Repeat Process:
The change detection cycle is complete for now. If another change is triggered (e.g., another button click), the process will repeat.

Let's explore a more complex example involving parent and child components. Suppose we have a ParentComponent that contains two instances of the DevCounterComponent.

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

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <app-dev-counter></app-dev-counter>
      <app-dev-counter></app-dev-counter>
    </div>
  `,
})
export class ParentComponent {}

But we should still be mindful of performance considerations and use strategies like OnPush change detection when appropriate to optimize their applications.

Certainly, let's delve into the OnPush change detection strategy in Angular. This strategy is a significant aspect of the change detection cycle, and understanding it is essential for effective application development.

Understanding about OnPush Detection Strategy

The "OnPush" change detection strategy is a feature in Angular that optimizes the change detection process by reducing the number of checks and updates made by Angular's change detection mechanism. It is designed to improve the performance of your Angular applications by focusing on components that explicitly indicate when their input properties have changed.
By default, Angular uses the "Default" change detection strategy, where it checks for changes in all components and their templates on every change detection cycle. This can lead to unnecessary checks and updates, impacting performance in larger applications. The "OnPush" strategy provides a way to mitigate this by making components more selective about when they should be checked for changes.

Here is a table summarizing the key differences between the two strategies
Default : Every change detection cycle
OnPush : When inputs or properties change

When to use OnPush

The "OnPush" change detection strategy should be used for components that are not constantly changing. This includes components that

Display static data
Only receive data from their parent components
Do not perform any calculations or transformations on their data

To set the "OnPush" strategy for a component, you specify it in the component's metadata using the changeDetection property. Here's an example

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-onpush-dev',
  templateUrl: './onpush-dev.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushDevComponent {
  @Input() data: any;

  constructor(private cdr: ChangeDetectorRef) {}

  // This method marks the component for change detection.
  triggerChangeDetection() {
    this.cdr.markForCheck();
  }

  // Event handler that updates the input property.
  updateData() {
    this.data = { newValue: 'Updated value' };
  }
}

In this example, the component OnPushdevComponent uses the "OnPush" change detection strategy. It has an input property data and a method triggerChangeDetection() that can be used to manually trigger change detection.

Conclusion

The OnPush change detection strategy can be a powerful tool for improving the performance of your Angular applications. However, it is important to use it wisely and to make sure that your components are using immutable data structures. By following these guidelines, you can use the OnPush change detection strategy to optimize your Angular applications and improve their performance.

That’s It!
Thanks for reading the whole story ❤

How to Use RXJS Debounce Time With Angular

Manoj Prasanna 🚀 — Tue, 01 Aug 2023 04:46:07 +0000

In this article, I will guide you through the concept of debounce time and how to use it in your Angular applications with RxJS operators. Debounce time helps efficiently manage user input and optimize application performance. I'll provide a step-by-step guide to help you understand how to use debounce time and improve your application's performance and usability. First, let's explore what debounce time is.

What is Debounce Time?

Debounce time is a technique used to prevent an event from being triggered too frequently. This can be especially useful in situations where you want to avoid the user spamming a button or sending an excessive number of requests to a server. For instance, let's consider an input search field similar to Google's search bar. If a user starts typing in the field, we don't want to immediately send a request for each character they type. Instead, we can use debounce time to delay the request and ensure it is sent only after the user has paused typing for a certain duration. By applying debounce time, we can efficiently manage user input and prevent unnecessary API calls, which can lead to a better user experience and improved application performance. Now let's see how to use the debounce time for our Angular application.

How to Use Debounce Time in Angular

Most Common approach is to apply debounce time by using the rxjs library. Which Angular already includes as a dependency.

And now Let's explore those operators and pipes.

debounceTime() pipe
The debounceTime pipe is a built-in Angular pipe that can be used to debounce an event. To use the debounceTime pipe, you need to pass the debounce time in milliseconds as an argument
distinctUntilChanged()
distinctUntilChanged is an operator that is used to filter out consecutive emissions of the same value from an Observable. This can be useful in situations where you want to prevent the Observable from emitting the same value multiple times in a row.
takeUntil()
The takeUntil() operator in Angular is used to automatically unsubscribe from an Observable when another Observable emits a value. This can be useful in situations where you want to prevent an Observable from emitting values after a certain point.

In this tutorial, I will show you how to use RxJS to apply debounce time to an input event. I will demonstrate way to implement debounce time in your application.

Step 01: Create the template file

In your template content

<div class="content" role="main">
  <h1>Welcome</h1>
  <h2>How to Use Debounce Time to Improve the Performance of Your Angular Applications</h2>
  <input type="text" 
  [(ngModel)]="inputText" 
  placeholder="Input something" (input)="onSearch()" />
<br/>
</div>

Above, I have implemented an input field with an input event that triggers the debounce function.

Step 02 : Import the required modules

Open the component file and import the necessary modules

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';

I import the required modules: Subject and the debounceTime operator from rxjs/operators.

Step 03 : Implement the debounce logic

Create a private searchSubject,which will emit values whenever the onSearch method is called.

export class AppComponent {
  title = 'CodeSandbox';
  private searchSubject = new Subject<string>();
  inputText: string = '';
  ngOnInit() {

  }
  onSearch() {
    this.searchSubject.next(this.inputText);
  }

}

In the ngOnInit lifecycle hook, I have established a subscription to the searchSubject. Within this subscription, I utilize the debounceTime operator to introduce a delay before processing the emitted events. This delay allows the timer to reset if the user continues typing within the specified time (in this case, 300ms). However, if the user pauses typing for the specified time, the searchSubject emits the latest value, triggering the execution of the performSearch method with that value.

export class DebounceExampleComponent implements OnInit, OnDestroy {
  private searchSubject = new Subject<string>();
  private readonly debounceTimeMs = 300; // Set the debounce time (in milliseconds)

  ngOnInit() {
    this.searchSubject.pipe(debounceTime(this.debounceTimeMs)).subscribe((searchValue) => {
      this.performSearch(searchValue);
    });
  }

  ngOnDestroy() {
    this.searchSubject.complete();
  }

  onSearch(searchValue: string) {
    this.searchSubject.next(searchValue);
  }

  performSearch(searchValue: string) {
    // Perform the actual search operation here
    console.log('Performing search for:', searchValue);
    // ... Your search logic ...
  }
}

Conclusion
Debounce time is a powerful technique to control the frequency of event execution in Angular applications. By strategically delaying the processing of input events, you can optimize the performance and responsiveness of your application. Whether it's handling user inputs or other frequent events, debounce time is a valuable tool to have in your Angular development toolbox.

That’s It!

Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:

Thanks for reading the whole story ❤

Implementing Lazy Loading from Angular ⭐

Manoj Prasanna 🚀 — Tue, 25 Jul 2023 19:25:43 +0000

In this article, I will delve into the implementation process of Lazy Loading in your Angular application. Additionally, I will provide a step-by-step guide on how to do lazy loading for you application.

Before delving into the concept of lazy loading, it is essential to have a clear understanding of routing.

Angular Routing

Angular routing is a mechanism that allows you to navigate between different views and components in your Angular application. It helps you build single-page applications (SPAs)by dynamically changing the content displayed on the page without reloading the entire page. Instead of traditional server-side routing, where the server handles navigation and page loads, Angular routing handles navigation on the client-side.

Why we want Lazy loading to our Application

Lazy loading is essential for optimizing the performance and user experience of your application. Lazy loading allows your application to load only the essential components and modules needed for the initial view. Other part of component are loading if user navigate to through the application.

What is Angular Lazy Loading

Angular provides a powerful feature called "Lazy Loading" which allows developers to load modules and components on-demand. Lazy loading is technique that allow user to defer loading of certain parts of an angular application. Parts mean certain modules in the application. These modules are loaded dynamically when a user navigate to a route associated with that module, It will reduce the initial load time as well.

Implementing Lazy loading to our Angular Application

In your Angular Application you need to create feature modules that encapsulate specific parts of your application. These modules can be loaded independently, and you can specify which modules should be lazy-loaded based on the routes.

Step 1: Configure Routes

in side your app.component.html template you need to defined the
<router-outlet></router-outlet>



<h2>{{title}}</h2>

<button class="btn btn-primary btn-sm" style="margin: 1%;"  routerLink="/users">Users</button>
<button class="btn btn-primary btn-sm" style="margin: 1%;" routerLink="/home">Home</button>

<router-outlet></router-outlet>

In your main app-routing.module.ts, configure your routes using the loadChildren property instead of component. The loadChildren property takes a string that points to the relative path of the lazy-loaded module.

Note: LoadChildren is use for lazy loading



import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path:'',
    redirectTo:'',
    pathMatch:'full'
  },
  {
    path:'users',
    loadChildren:()=> import('./users/users.module').then(m=> m.UsersModule)
  },
  {
    path:'home',
    component:HomeComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 2: Create the Users Modules
To use Lazy Loading, we need to create feature modules that encapsulate specific parts of our application. Each feature module contains its components, services, and other related files.

Open the terminal command and create new component called users component by running the command



ng generate component users

Create the users Module(in this case, users.module.ts),



ng generate module users

Note: You can create the above module and component manually instead of executing commands

Apart from that, we need to create a feature routing module under the users-routing.module.ts file. It should be defined in the users.module.ts file under the imports section.



  imports: [
    CommonModule,
    UsersRoutingModule
  ]



import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersComponent } from './users.component';

const routes: Routes = [
 {
    path:'',
    component:UsersComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

Here is the folder structure after generating the component and module file

Step 3: Defined Child routing from the users module

We need to created two separate component called users-list and users-detail

inside the users.module.ts we need to defined the two component under the declarations



import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersComponent } from './users.component';
import { UsersRoutingModule } from './users-routing.module';
import { UsersListComponent } from './users-list/users-list.component';
import { UserDetailComponent } from './users-list/user-detail/user-detail.component';



@NgModule({
  declarations: [
    UsersComponent,
    UsersListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    UsersRoutingModule
  ]
})
export class UsersModule { }

After that we need to defined the feature child routing under the users-routing.module.ts under the routes



import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UsersListComponent } from './users-list/users-list.component';
import { UserDetailComponent } from './users-list/user-detail/user-detail.component';

const routes: Routes = [
  {
    path:'',
    component:UsersComponent
  },
  {
    path:'user-list',
    component:UsersListComponent
  },
  {
    path:'user/:id',
    component:UserDetailComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

Step 4: Defined Child routing handling Templates

Inside the users.component.html file, we have set up navigation for the child routing using the routerLink directive. This allows us to navigate to different child routes when the user clicks on specific links. Here's an example of how it's done:



<h2>User Component</h2>

<button class="btn btn-warning btn-sm" style="margin: 1%;" [routerLink]="['/users','user-list']">User List</button>
<button class="btn btn-warning btn-sm" style="margin: 1%;" [routerLink]="['/users','user','123']">User Details</button>

For Explanation about above **routerLink**
The [routerLink] attribute can be bound to an expression, and in the [routerLink]="['/users','user-list'] the expression is ['/users', 'user-list']. This expression is an array of path segments, where each element represents a part of the route URL.

Let's break down the expression:

'/users' : Representing the parent route. It indicates that the navigation will happen relative to the 'users' route
'user-list' : Representing the child route. It indicates that we want to navigate to the 'user-list' route, which is a child route of the 'users' route

Conclusion:
Angular Lazy Loading is a powerful feature that optimizes performance by loading modules and components on-demand. By strategically employing Lazy Loading, we can reduce the initial load time and improve the overall user experience

That’s It!

Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:

Demo

GitHub : dev-to-angula lazy loading

Thanks for reading the whole story ❤

How to use mergeMap and forkJoin to handle multiple API requests in Angular 🚀

Manoj Prasanna 🚀 — Mon, 17 Jul 2023 17:00:47 +0000

In this Article, I will explore the process of how to handle multiple API requests in Angular. Handling multiple API requests in Angular is a common scenario in modern web development. It's essential to implement an efficient and maintainable solution to avoid issues such as nested subscriptions. In this article, we will explore the proper way to handle multiple API requests using the mergeMap and forkJoin operators from the Angular RxJS library.

First of all, I will explain the problem.

problem because we are not using nested subscriptions

In the real world, it is common to make multiple API calls in our web applications. When navigating to a page, it is often necessary to retrieve data from various APIs. In Angular, the subscribe operator is typically used to fetch data from a single API call. However, when dealing with multiple API calls, there are more effective methods to implement this. We can initially solve the problem using the subscribe operator and then improve upon it by utilizing mergeMap and forkJoin.

Subscribe()

Normally, this technique is quite simple. However, when we trigger a new subscription for each and every value emitted by the Observable of call(), it can result in the creation of numerous unhandled Observables and Subscriptions. All of these entities remain in memory for the time being, leading to potential issues. Here is nested subscription example

export class DevToComponent implements OnInit {
    todoValue: string = '';
    comment: any;

    constructor(private http: HttpClient) { }

    ngOnInit(): void {

        this.retrieveDefaultData();
    }

    retrieveDefaultData(): void {
        this.http.get('https://jsonplaceholder.typicode.com/posts/1')
            .pipe(map(todo => todo[0]))
            .subscribe(
                todo => {
                    this.todoValue = todo;
                    this.http.get(`https://jsonplaceholder.typicode.com/posts/${this.todoValue}/comments`)
                        .subscribe(
                            coment => {
                                this.comment = coment;
                            }
                        );
                }
            )
    }

}

It's important to note that when you subscribe() to an Observable multiple times, your subscribers won't listen to the exact same source. Instead, each subscription triggers a new copy of the defined Observable pipeline.

MergeMap()

This operator takes an input observable, applies a transformation function to each emitted value, and merges the resulting observables into a single output observable.By using MergeMap(), we can avoid nested subscriptions and achieve a more streamlined and efficient approach to handling asynchronous requests.

We can use the MergeMap() when we need data information from first API request to second API request:

export class DevToComponent implements OnInit {
    todoValue: string = '';
    comment: any;
    mergeMapResult: any;
    constructor(private http: HttpClient) { }

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

    retrieveDefaultData(): void {
        this.http.get('https://jsonplaceholder.typicode.com/posts/1')
            .pipe(
                map(todo => {
                    return todo
                }),
                mergeMap(todo => this.http.get(`https://jsonplaceholder.typicode.com/posts/${todo}/comments`))
            ).subscribe(response => {
                this.mergeMapResult = response;
            })
    }

}

Using mergeMap avoids nested subscriptions, you can avoid nested subscriptions and flatten the asynchronous operations. This leads to cleaner and more readable code, as the operations are executed sequentially instead of nesting multiple subscription callbacks.

ForkJoin()

This operator,when you have multiple parallel API requests that are independent of each other and you want to wait for all of them to complete before taking further action, you can use the forkJoin() operator instead of nested subscriptions.

We can use the ForkJoin() calling independent multiple API requests:

export class DevToComponent implements OnInit {
    todoValue: string = '';
    comment: any;
    firstApiResult: any;
    secondApiResult: any;
    constructor(private http: HttpClient) { }

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

    retrieveDefaultData(): void {
        const firstAPI = this.http.get('https://jsonplaceholder.typicode.com/posts/1')
        const secondAPI = this.http.get(`https://jsonplaceholder.typicode.com/posts`)

        forkJoin([firstAPI, secondAPI]) //we can use more that 2 api request 
            .subscribe(
                result => {
                    //this will return list of array of the result
                    this.firstApiResult = result[0];
                    this.secondApiResult = result[1];
                }
            )
    }

}

Using forkJoin() simplifies the handling of parallel API requests by providing a clean and efficient way to wait for all requests to complete. It eliminates the need for nested subscriptions, improving code readability and maintainability.

Note : Note that if any of the source observables in forkJoin() errors before completing, the entire observable will error and no result will be emitted. So, it's important to handle error cases appropriately when using forkJoin().

Conclusion
By adopting the use of mergeMap() and forkJoin() in RxJS, you have acquired a powerful technique for handling multiple API requests without resorting to nested subscriptions. This approach not only improves the readability and maintainability of your code but also allows for efficient parallel execution of asynchronous operations.

Thanks for reading the whole story ❤

How to Handle Dynamic Form fields in Reactive forms in Angular

Manoj Prasanna 🚀 — Sun, 16 Jul 2023 11:06:58 +0000

In this article, I will explore the process of handling dynamic forms in the Angular framework using Reactive Forms. Dynamic forms allow us to dynamically generate form fields based on user input or other conditions. By leveraging the power of Reactive Forms, we can easily handle dynamic form interactions in Angular. Let's dive into the step-by-step process of creating and managing dynamic forms in Angular.

Reactive Forms

First we will explain what is reactive form in angular,
Reactive forms are build around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.In Angular their have two type of forms ,

Template-driven forms
Reactive Forms

Related to above form type the suitable to create dynamic form from Reactive forms, Lets started with building simple sample application.

Scenario

Step-01 : Setting up the Angular project

First, Let's create a new Angular project using the Angular CLI.
Open your command prompt(terminal) and run the following command.



ng new dynamic-forms-demo

Step-02 : Create the new component

Create a new component for the dynamic form



ng generate component dynamic-form

another way



ng g c dynamic-form

Now you will create a component name call dynamic-form under the "src" folder

Step 3: Import the Required Modules

In order to work with Reactive Forms, we need to import the ReactiveFormsModule from @angular/forms module. Open the app.module.ts file in your project and add the following import statement:



import { ReactiveFormsModule } from '@angular/forms';

Then include the ReactiveFormsModule to the imports sections



@NgModule({
  declarations: [
    // Other declarations
  ],
  imports: [
    // Other imports
    ReactiveFormsModule
  ],
  providers: [
    // Other providers
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Set Up the Reactive Form

doing inside of the dynamic-form.component.ts

Import the FormArray, FormBuilder, FormGroup to the dynamic-form component



import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

Then,inside the class define the dynamicFormGroup



export class DynamicFormComponent implements OnInit {

  dynamicFormGroup!: FormGroup;  //defined the dynamicFormGroup

  constructor() { }

  ngOnInit() {

  }

}

In the component's constructor, initialize the form group and form array



export class DynamicFormComponent implements OnInit {

  dynamicFormGroup!: FormGroup;

  constructor(private formBuilder : FormBuilder) { }

  ngOnInit() {
    this.dynamicFormGroup = this.formBuilder.group({
          Address: new FormArray([])
    });
  }
}

Then create the dynamic fields for the Address



get createItem(): FormGroup {
    return this.formBuilder.group({
      streetAddress: [],
      city:[],
      state:[]
    })
  }

Now we need to add the createItem method fields for the Address group, The createItem method creates a new instance of the FormGroup for the Address group, with the corresponding form control fields (streetAddress, city, state,) and their initial values set to an empty string.



 ngOnInit() {
    this.dynamicFormGroup = this.formBuilder.group({
      Address: new FormArray([this.createItem]),
    });
  }

Step 5: Build the Dynamic Form Template

Now, let's construct the template for our dynamic form in the dynamic-form.component.html file.



 <div>
    <form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()">
        <div class="form-row" *ngFor="let fields of AddressInfo.controls; let i = index" >
            <div class="form-group col-md-3" >
                <label for="password"><b>Street Address</b></label>
                <input type="text" class="form-control" placeholder="Street Address" name="SA" formControlName="streetAddress" />
              </div>
              <div class="form-group col-md-3" >
                <label for="password"><b>City</b></label>
                <input type="text" class="form-control" placeholder="City" name="city" formControlName="city" />
              </div>
              <div class="form-group col-md-3" >
                <label for="password"><b>State</b></label>
                <input type="text" class="form-control" placeholder="State" name="state" formControlName="state" />
              </div>
        </div>
        <br/>
     <button type="submit"  class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <button type = "button" class="btn btn-primary" (click)="addNewAddress()" >Add New Address</button>
</div>    

<h4>OUTPUT</h4>
<div>{{output}}</div>

Step 7: Display and Interact with the Dynamic Form

In the template, add a button to trigger the addition of form fields dynamically:



<button type = "button" class="btn btn-primary" (click)="addNewAddress()" >Add New Address</button>

Additionally, you can bind the form array's controls to display the dynamic form fields



<div class="form-row" *ngFor="let fields of AddressInfo.controls; let i = index" >
<!-- Display form fields dynamically -->
</div>

Step 8: Handle Form Submission

To handle the form submission, create a method in the component:



onSubmit() {
//logic implementation
this.output = this.dynamicFormGroup.controls['address'].value;
    console.log(this.output);
}

Conclusion:
By following these step-by-step instructions, you have learned how to create dynamic forms in Angular using Reactive Forms. Leveraging the power of Reactive Forms and Angular's capabilities, you can now handle and manage dynamic forms seamlessly. This knowledge opens up new possibilities for building interactive and user-friendly applications in Angular. Happy coding!
Here is the Example Solution :Angular Dynamic Forms handling reactive forms

That’s It!
Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:

Thanks for reading the whole story ❤

PC : https://morioh.com/p/3cbcfff8086a