Create a New Angular Project

ng new multiselectdropdown

Install-Package

To build a multi-selection dropdown menu we need to install the package @Ng-select/ng-select.

npm install @ng-select/ng-select

Import-Package in App Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 
import { NgSelectModule } from '@ng-select/ng-select';

@NgModule({
  declarations: [
    AppComponent,    
    MultiselectdropdownComponent
  ],
  imports: [
    BrowserModule, 
    FormsModule,
    NgSelectModule
     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Update app.component.html

<div class="d-flex justify-content-center mt-5"> 
    <div class="col-0"> 
    <app-multiselectdropdown></app-multiselectdropdown> 
    </div>
</div> 

Create Component

ng g c multiselectdropdown/multiselectdropdown–skip-tests

multiselectdropdown.component.ts

import { Component, OnInit } from '@angular/core';
import { DropdownservicesService } from '../services/dropdownservices.service';
 

@Component({
  selector: 'app-multiselectdropdown',
  templateUrl: './multiselectdropdown.component.html',
  styleUrls: ['./multiselectdropdown.component.css']
})
export class MultiselectdropdownComponent { 
     
  
    countries =[
      {
         "id" : 1,
         "name":"USA"
      },
      {
         "id" : 2,
         "name":"Australia"
      },
      {
         "id" : 3,
         "name":"Germany"
      },
      {
         "id" : 4,
         "name":"England"
      }
     ];
     selected = [{id:1,name:'USA'}]; 
}

multiselectdropdown.component.html

 <div>
    <ng-select 
     [items]="countries"
     bindLabel="name"
     [multiple]="true" 
     [(ngModel)]="selected">
     </ng-select>      
 </div>

run application
ng serve

More Related Article Create a Cascading Dropdown List in Angular

The post How to Create a Multi-Select Dropdown List in Angular appeared first on Tech Insights.

Let’s understand what cascading dropdowns are and why they are beneficial. A cascading dropdown also known as a dependent or interconnected dropdown, means one dropdown depends on the other.

This dynamic behavior can significantly improve the user experience, especially in scenarios where data hierarchy or interdependencies exist.

Let’s get started

Create a New Angular Project

ng new cascadingdropdown

Create Json Data

path:/assets/data.json

{"countries":[
 {
    "id" : 1,
    "name":"USA"
 },
 {
    "id" : 2,
    "name":"Australia"
 },
 {
    "id" : 3,
    "name":"Germany"
 },
 {
    "id" : 4,
    "name":"England"
 }
],
"states":[
    {
        "id" : 1,
        "name":"Califonia",
        "country_id":1

     },
     {
        "id" : 2,
        "name":"Colorado",
        "country_id":1

     },
     {
        "id" : 3,
        "name":"Sydney",
        "country_id":2

     },
     {
        "id" : 4,
        "name":"Adelaide",
        "country_id":2

     },
     {
        "id" : 5,
        "name":"Belin",
        "country_id":3

     },
     {
        "id" : 6,
        "name":"Hamburg",
        "country_id":3

     },
     {
        "id" : 7,
        "name":"London",
        "country_id":4

     },
     {
        "id" : 8,
        "name":"East of England",
        "country_id":4

     }
]
}

Create Services

Next, write the service for fetching data, In this instance, we will utilize a JSON data file which is located in the assets folder.

ng g s Services/dropdownservices.service  --skip-tests

path: Services/dropdownservices.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DropdownservicesService {
  baseurl = 'assets/data.json';

  constructor(private http:HttpClient) { }
 
  getAll():any{
    return this.http.get<any>(this.baseurl);
  }  
}

Create Component

ng g c dropdown/dropdown –skip-tests

path:/ dropdown/dropdown.ts

import { Component, OnInit } from '@angular/core';
import { DropdownservicesService } from '../services/dropdownservices.service';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
  
  countries : any;
  states:any;

  selectedvalue:any={
    id:0,name: ''
  }

  constructor(private dropdwonservice:DropdownservicesService){}

  ngOnInit(): void {
     this.getall();
     this.onsubmit(this.selectedvalue.id);
  }

  getall(){
    this.dropdwonservice.getAll()
      .subscribe((data:any)=>{
        this.countries = data,
        console.log(this.countries)
      })
  }
  onsubmit(country_id:any){
    this.dropdwonservice.getAll().subscribe((response:any)=>{
      this.states = response['states'].filter(
        (response:any)=> response.country_id == country_id!.value
      ),
      console.log(this.states);
    })
  }
}

path:/ dropdown/dropdown.html

<div>
    <label for="country">Country</label>
    <div class="input-group input-group-sm mb-3">
        <select  [(ngModel)]="selectedvalue.id" (change)="onsubmit($event.target)" class="form-select">
            <option value="0">--Select country--</option>
            <option *ngFor="let country of countries?.countries" [value]="country.id">{{ country.name }} </option>
        </select>
    </div>

    <label for="state">State</label>
    <div class="input-group input-group-sm mb-3">
        <select class="form-select">
            <option value="0">--Select country--</option>
            <option *ngFor="let state of states" [value]="state.id">{{ state.name }} </option>
        </select>
    </div>
</div>

App Module

You must import  HttpClientModule and FormsModule in the AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { HttpClientModule } from '@angular/common/http'
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    DropdownComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

update app.component.ts

<div class="d-flex justify-content-center mt-5">
   
    <div class="col-0">
    <app-dropdown></app-dropdown>
    </div>
</div> 

More Related Articles – Create CRUD operation using Angular and ASP.NET Core Web API

Conclusion

Creating a Cascading Dropdown List in Angular enhances the user experience by providing dynamic and context-aware options. By following the steps outlined in this article, you can easily implement this feature in your Angular applications.

The post How to Create a Cascading Dropdown List in Angular appeared first on Tech Insights.