How can I convert select all to unselect all in ngmultiselect within the Angular framework?

My attempt at resolving the issue is as follows, but it seems to be malfunctioning:

 (<HTMLInputElement>(<HTMLInputElement>document.getElementById("Categorydropdown")).children[0].children[1].children[0].children[0].children[0]).checked=true;       
      (<HTMLInputElement>(<HTMLInputElement>document.getElementById("Categorydropdown")).children[0].children[1].children[0].children[0].children[1]).innerHTML="UnSelect All"; 

After making an API call, I expect the select all checkbox to be checked and then change to unselect all.

Answer №1

Manage the selection and deselection process while updating the button text accordingly.

HTML

<ng-multiselect-dropdown
  #dropdown
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings">
</ng-multiselect-dropdown>

<button (click)="handleApiCall()">Make API Call</button>

TS

import { Component, ViewChild } from '@angular/core';
import { NgMultiSelectDropDownComponent } from 'ng-multiselect-dropdown';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('dropdown') dropdown: NgMultiSelectDropDownComponent;

  selectAll() {
    this.dropdown.selectAll();
    this.updateButtonText('Deselect All');
  }

  unselectAll() {
    this.dropdown.unselectAll();
    this.updateButtonText('Select All');
  }

  updateButtonText(text: string) {
    const selectAllButton = document.querySelector('.dropdown-select-all-button'); // Adjust this selector based on your button's class or id
    if (selectAllButton) {
      selectAllButton.textContent = text;
    }
  }

  handleApiCall() {
    // Implement your API call logic here
    this.selectAll(); // or this.unselectAll() as needed
  }
}

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

SignalR Integration Issue in Angular2 (Typescript) - Import Troubleshooting

I've encountered some issues while trying to implement signalR in my Angular2-Typescript application. Previously, I had no trouble using it in an Angular 1 app. The problem seems to lie in the importing process. While I do have intellisense working, ...

Revamp a function designed to calculate complimentary items

Recently, I've been working on a method that calculates the total number of freebies based on an array of items. While the current implementation gets the job done, it seems like there is a fair amount of redundant code present. I'm looking for s ...

How do I find the location of /typings when upgrading from version 0.x to 1.x?

As I develop an Angular 2 app using TypeScript, I have been following the guidance found in the 5 Min Quickstart guide. Recently, the npm typings package was updated from version 0.x to 1.x. Following the instructions on the official website, I deleted the ...

Svelte warns of potential undefined Variable when using "bind:this={}"

Whenever I attempt to utilize the bind:this attribute in Svelte, I encounter this message in vscode: 'cardGroup' is possibly 'undefined'.js(18048) Upon execution, the following error arises: TypeError: Cannot read properties of undefin ...

Date Polyfill with Internationalization API in Angular 4/Angular-cli is not functioning as expected

I am struggling to make the polyfill of the Internationalization API work properly. The documentation (https://angular.io/docs/ts/latest/guide/pipes.html) states that all you need to do is add a script to your index.html: <script src="https://cdn.poly ...

Leverage the power of react-redux useSelector with the precision of TypeScript

When attempting to utilize the new useSelector hook (shown in the example below) from react-redux in TypeScript, an error is encountered indicating that the function does not exist: Module '"../../../node_modules/@types/react-redux"' has no expo ...

Utilize the information from the first page in order to enhance the content on

I have developed a straightforward app that opens a new page displaying the text of the list element clicked by the user. My goal is to pass the device variable to a page named deviceDetails. <ion-list> <ion-item *ngFor="let device of devices" ...

Encountering an issue while running an Angular project related to the angular-in-memory-web-api

Here is the structure of my observable and subscribe classes: Observable https://i.sstatic.net/2qOra.png Subscribe https://i.sstatic.net/rDPBV.png Error https://i.sstatic.net/HW5cj.png ...

Adding services to an Angular class instance for dependency injection

When attempting to utilize an instance of a class within a static property of another class, I encountered the following issue: class MyHelper { private authService: AuthService; constructor() { this.authService = inject(AuthService); this ...

Guide to initializing the state in pinia with Typescript

I am encountering an issue while trying to add typescript to a pinia store. Any suggestions on how to resolve this problem would be appreciated. The project currently utilizes pinia:^2.0.16 and Vue:3.2.37 The error message is as follows: Type '{}&a ...

Listener of events calculates the outcome

In need of help with retrieving the current coordinates of a clicked point on Google Maps. Here is my code snippet: let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); getCoords() { google.maps.event.addListener ...

Issue with Typescript and react-create-app integration using Express

I'm relatively new to Typescript and I decided to kickstart a project using create-react-app. However, I encountered an issue while trying to connect my project to a server using express. After creating a folder named src/server/server.ts, React auto ...

Troubleshooting the error message "Encountering issues with Module build failed (from ./node_modules/postcss-loader/src/index.js)"

Running ng serve results in compilation failure after the chunks are generated. The same codebase is functioning on a co-worker's computer with identical versions as listed below: Node version: 10.16.3 NPM version: 6.9.0 @angular/cli: 7.3.9 Tried ...

A software piece producing a JSX element that generates a single function

Is it possible to create a JSX element or component that returns a single function as its child? For instance: interface ComponentChildrenProps { someProp: string; } const Component: React.FC<ComponentProps> = ({ children }): JSX.Element => { ...

It seems that every time you save data in Angular, the local storage array gets overwritten

While using Angular, I encountered an issue with saving to local storage. The code works fine for saving items initially, but on refreshing the page and trying to add more objects to the local storage array, it overwrites instead of appending. Can you help ...

Make sure to pause and wait for a click before diverting your

Having an issue with a search dropdown that displays suggestions when the search input is focused. The problem arises when the dropdown closes as soon as the input loses focus, which is the desired functionality. However, clicking on any suggestion causes ...

Using a universal class URL for all components in Angular 6: Tips and tricks

One common class is imported in all components with a common URL, but the URL appears to not be working. How can I create a common URL for all components in Angular so that changes need only be made in the common class in the future? export class CommonCl ...

MatSort: the name of the property is not the same as matColumnDef -> causing issues

Is it possible to use matSort in an Angular table to sort a column where the property name differs from the matColumnDef? <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header>TEST</th> ...

Material Design Forms in Angular: A Winning Combination

I'm currently working on developing a form using Angular Material. This form allows the user to update their personal information through input fields. I am utilizing "mat-form-field" components for this purpose. However, there are certain fields tha ...

Arrange the elements within the anchor tag in a vertical line using Angular Material

Is there a way to style the elements within an anchor tag in Angular Material so that they display in a single line? I am looking for the CSS solution to achieve this outcome. This is my current HTML code: <a mat-list-item [routerLink]="['das ...