Angular 6 offers a versatile multi-select dropdown feature

Looking to select multiple values in Angular 6 using checkboxes. When selecting a department from the dropdown, a list of employees related to that department is displayed in another dropdown with checkboxes. However, only the last value of the array appears in the dropdown. I am utilizing ng-multiselect-dropdown for handling multiple selections.

{
   "content":[
      {
         "userid":6,
         "firstName":"Anns Jarigo",
         "lastName":"PaulRaj",
         "jobTitle":"JAVA_DEVELOPER",
         "position":"TEAM_MEMBER",
         "mode_of_employement":"Direct",
         "phoneNumber":"9087881162",
         "date_of_joining":"24-02-2018",
         "reportManager":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4330222e...``
typescriptangular6multi-select

Answer №1

<ng-multiselect-dropdown
[placeholder]="'select your options'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(click)="onCheck("provide details here",$event)"
>
</ng-multiselect-dropdown>

within your component.ts file

itemsSelected: Array<Int32Array> = [];

  onCheck(selection: any, event) {
  console.log(selection, event, "Chosen");
  if (event.target.checked) {
    this.itemsSelected.push(selection);

  } else if (!event.target.checked) {
    let index = this.itemsSelected.indexOf(selection);
    this.itemsSelected.splice(index, 1);
  }
  console.log(this.itemsSelected);

}

customize the function and variable names as needed

Answer №2

this.newDropdownSettings = {
  singleSelection: false,
  idField:'testId',
  textField: 'test',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

update the property names above instead of using an extra for loop.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exporting Arrays in Ionic Angular with Typescript is an essential feature

When trying to access an exported component in Typescript, there may be issues with importing the module correctly into another component. An error message is displayed when calling the AddToArray method: Cannot read property 'push' of undefi ...

angulartypescriptionic-framework

Interact with SOAP web service using an Angular application

I have experience consuming Restful services in my Angular applications, but recently a client provided me with a different type of web service at this URL: http://123.618.196.10/WCFTicket/Service1.svc?wsdl. Can I integrate this into an Angular app? I am ...

javascriptangulartypescriptrestweb-services

"Creating a Typescript array by extracting items from a different const array (as seen in the official beginner tutorial

Currently, I am working through the Angular tutorial that can be found at https://angular.io/start. After successfully completing the tutorial, I decided to practice building for production locally. However, when attempting to build, I encountered this err ...

javascriptangulartypescript

What is the method to determine the length of a string with TypeScript?

Looking to derive the numerical length of a string: type Length = LengthOfString<"hello"> // ^? should equal 5 Feeling a bit lost on how to approach this. Any guidance on how to achieve this? (Currently diving into typescript's typ ...

typescript

Navigating through a large array list that contains both arrays and objects in Typescript:

I have an array containing arrays of objects, each with at least 10 properties. My goal is to extract and store only the ids of these objects in the same order. Here is the code I have written for this task: Here is the structure of my data: organisationC ...

javascriptnode.jstypescript

How can I load a separate component.html file using a component.ts file?

Hey there, I'm a beginner with Angular and I have a question about loading a different home.component.html file from a method within books.component.ts. Here's the code snippet from my books.component.ts file: import { Component, OnInit } from ...

node.jsangulartypescriptroutes

What is the step-by-step guide for implementing an access limiter on an interface

When attempting to modify the access level on an interface in Typescript, I encountered an error stating 'cannot appear in type member.' After removing the access limiter on the interface and implementing it, I tried changing the access limiter o ...

typescriptinterface

Error: The script cannot be compiled with the '--isolatedModules' flag as it is recognized as a global script file

Currently, I am working on building my NextJS app and incorporating Cypress for testing along with Typescript. During this process, I encountered the following error: Type error: 'home.cy.ts' cannot be compiled under '--isolatedModules' ...

typescriptnext.jscypress

Unable to locate the next/google/font module in my Typescript project

Issue With Import Syntax for Font Types The documentation here provides an example: import { <font-name> } from 'next/google/font'; This code compiles successfully, but throws a "module not found" error at runtime. However, in this disc ...

typescriptnext.jsnrwl-nxnrwl

Utilizing a directive in contexts beyond a component

I have developed a popover module that consists of two components and three directives. However, I am encountering an issue where I am unable to utilize the directives outside of the main component. Whenever I try to do so, I face an editor error stating: ...

javascriptangulartypescript

Issue with conflicting namespaces warning when compiling an Angular 9 project with ng-packagr using Typescript

I'm trying to pinpoint the root cause of this problem, and I suspect it may be related to Typescript. However, it could also involve ng-packagr or Angular. This issue only arose after upgrading to Angular 9. Upon building my production environment, I ...

angulartypescriptcompilationcompiler-warningsng-packagr

How to Use an Object Created from a Different Class in TypeScript

Scenario In the development process, I am using an auth.service.ts. This service is responsible for fetching user information from the database upon login. The retrieved data is then used to create a new user object. Here is a snippet of the code: user: ...

javascriptangulartypescript

Utilizing external imports in webpack (dynamic importing at runtime)

This is a unique thought that crossed my mind today, and after not finding much information on it, I decided to share some unusual cases and how I personally resolved them. If you have a better solution, please feel free to comment, but in the meantime, th ...

javascriptnode.jstypescriptwebpack

Using LINQ with ngFor in Angular 6

Within the component.ts, I extract 15 different lookup list values and assign each one to a list, which is then bound to the corresponding <select> element in the HTML. This process functions correctly. Is there a method to streamline this code for ...

angulartypescript

The functionality of the KendoReact Grid for filtering and sorting is not functioning correctly when data is grouped

Once I group the data, the filter and sort functions in the KendoReact Grid stop working. Interestingly, if I bypass the grouping step and show the data without grouping, the filter and sort functions function perfectly fine. My main objective is to figu ...

reactjstypescriptkendo-react-ui

Combining Firebase analytics with an Ionic 3 application using the Ionic Native plugin

I placed the GoogleService-Info.plist file at the root of the app folder, not in the platforms/ios/ directory. When I tried to build the app in Xcode, an error occurred in the following file: FirebaseAnalyticsPlugin.m: [FIROptions defaultOptions].deepLin ...

angulartypescriptionic-frameworkionic3firebase-analytics

Is it feasible to obtain the userId or userInfo from the Firebase authentication API without requiring a login?

Is it feasible to retrieve the user id from Firebase authentication API "email/password method" without logging in? Imagine a function that takes an email as a parameter and returns the firebase userId. getId(email){ //this is just an example return t ...

angulartypescriptauthenticationfirebase-authentication

Can I access the component attributes in Vuetify using Typescript?

For example, within a v-data-table component, the headers object contains a specific structure in the API: https://i.stack.imgur.com/4m8WA.png Is there a way to access this headers type in Typescript for reusability? Or do I have to define my own interfac ...

typescriptvue.jsvuetify.js

What are the benefits of maintaining a property as non-observable instead of observable in knockout.js?

In my TypeScript project utilizing Knockout.js, I have a class with several properties. One of these properties is 'description', which is not directly tied to the DOM but needs to be used in popups triggered by certain mouse events (such as butt ...

typescriptknockout.js

Creating a dynamic selection in Angular without duplicate values

How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...

angulartypescript