How to implement select dropdown in Angular? Archives - Tech Insights Unveiling Tomorrow's Tech Today, Where Innovation Meets Insight Sat, 09 Sep 2023 06:47:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://i0.wp.com/reactconf.org/wp-content/uploads/2023/11/cropped-reactconf.png?fit=32%2C32&ssl=1 How to implement select dropdown in Angular? Archives - Tech Insights 32 32 230003556 How to Create a Multi-Select Dropdown List in Angular https://reactconf.org/how-to-create-a-multi-select-dropdown-list-in-angular/ https://reactconf.org/how-to-create-a-multi-select-dropdown-list-in-angular/#respond Sat, 09 Sep 2023 06:47:17 +0000 https://labpys.com/?p=1593 In this article, we will learn How to Create a Multi-Select Dropdown List in Angular.  The Angular MultiSelect dropdown serves as a substitute for the HTML select tag, enabling users …

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

]]>
In this article, we will learn How to Create a Multi-Select Dropdown List in Angular.  The Angular MultiSelect dropdown serves as a substitute for the HTML select tag, enabling users to choose multiple values from a predefined list of options. It functions as a textbox component that permits users to either type in or select multiple values.

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.

]]>
https://reactconf.org/how-to-create-a-multi-select-dropdown-list-in-angular/feed/ 0 1593