PrimeNG Multiselect: Simplifying selection of entire groups

I am currently working with a PrimeNG grouped multi select component and I'm curious if there is a way to select all items within a group by simply clicking on the group itself?

Below is the code that I have implemented so far:

<p-multiSelect [options]="items" [group]="true" [(ngModel)]="selectedItems" optionLabel="name" optionValue="id" optionGroupLabel="label" optionGroupChildren="subItems" (onChange)="changed()"></p-multiSelect>

Upon implementation, this is what I see:

https://i.sstatic.net/mxsUj.png

However, my desired functionality would include having a checkbox next to "Germany" which when clicked, selects all cities within "Germany". Any suggestions on how to achieve this?

angulartypescriptprimengmulti-select

Answer №1

If you are following the implementation outlined in the documentation.

<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities" defaultLabel="Select a City" scrollHeight="250px" display="chip">
<ng-template let-group pTemplate="group">
    <div class="p-d-flex p-ai-center">
        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/>
        <span>{{group.label}}</span>
    </div>
</ng-template>

Try adding a click event to the div containing the span.

<div class="p-d-flex p-ai-center" (click)="selectedCities = group.items">

If that doesn't work, consider wrapping it in a function:

<div class="p-d-flex p-ai-center" (click)="setSelection(group.items)">

In your component's TypeScript file:

setSelection(items) => {this.selectedCities = items}

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

Exploring the connections among Angular, Angular-CLI, Angular-seed, and Ionic

I'm currently tackling a project in Angular 2. I'm a bit puzzled about the relationship between CLI, Seed, and Ionic with Angular. Are they considered sub-frameworks of Angular? ...

angularionic-frameworkangular-cliangular-seed

Troubleshooting Issue with Accessing ASP.NET Core WebApi through Ionic

Having trouble making a connection between my ASP.NET Core WebAPI and Ionic application. The data seems to be loading correctly based on the developer tools, but an error is thrown by Ionic: Error message from Ionic: https://i.sstatic.net/CXroV.png Here ...

angularionic-frameworkionic3asp.net-core-webapiasp.net-core-2.1

TypeScript error: Unable to locate namespace 'ng'

I am attempting to utilize a tsconfig.json file in order to avoid having /// <reference tags at the beginning of multiple files. However, I keep encountering this error: [ts] Cannot find namespace 'ng'. any Here is my configuration within ...

javascriptangularjstypescripttypescript-typings

Is there a sorting data accessor available in swimlane ngx-datatable similar to the one found in the angular material table?

I am currently working on implementing ngx-datatable in my code. The row data consists of key value pairs, with the value being of type object. Unfortunately, the default sorting is not functioning as expected. In Angular Mat-Table, there is a property cal ...

angularngx-datatable

Supporting right-to-left (RTL) localization in Angular 2 and later versions

When it comes to incorporating right-to-left (RTL) support into a localized Angular 2+ application, particularly for languages like Hebrew and Arabic, what is considered the best approach? I have explored various tutorials, including Internationalization ...

angulartypescriptlocalizationright-to-left

conceal a div in Angular when the user is authenticated

One of my tasks involves managing the visibility of a div based on whether the user is logged in. This functionality is achieved by utilizing an authentication service in Angular and tokens from Django. Component.html <a *ngIf="authService.isLoggedIn( ...

angular

Angular application code modifications do not reflect in the browser

After making changes to the HTML file of an Angular component, the browser does not reflect those changes when connected to localhost. Even though the old string is no longer present in the project, the browser continues to display it. Interestingly, openi ...

angulartypescriptnpmangular-cli

There is an issue with the target entry-point "fullcalendar/angular" as it is missing some dependencies

My current project uses Ionic, but I'm encountering an error related to missing dependencies for "@fullcalendar/angular" when running ionic serve. Error: [ng] ERROR in The target entry-point "@fullcalendar/angular" has some missing dependencies ...

node.jsangularnpmfullcalendarangular9

Angular - Navigate to Login Page post registration and display a confirmation message

As a newcomer to Angular, I am currently working on an Angular and Spring Boot application. So far, I have created components for user login and registration along with validation features. Now, my goal is to redirect the user to the login page upon succes ...

javascriptangulartypescript

I was anticipating only one request, but unexpectedly uncovered two requests. Now I need to figure out how to test for multiple requests

I am currently developing an Angular application and implementing Jasmine for testing purposes. My goal is to test for two similar HTTP requests within a single method, such as ngOnInit(). In my ngOnInit() method, there are two HTTP requests being called ...

angularjasminekarma-coverage

What could be the reason behind my Heroku app suddenly crashing without any visible errors?

After successfully starting the Nest application, about 50 seconds later it transitions from 'starting' to 'crashed'. The last log entry before the crash is a console log indicating the port number. View Heroku logs after successful bui ...

javascriptnode.jstypescriptherokunestjs

Expanding a given type using Typescript

My goal is to construct a custom table using Angular, where I aim to define a TableItem type that enforces the presence of a label property for every item added to the table. For instance, consider this example: <app-my-table [items]="items&qu ...

angulartypescript

Tips for using jest toHaveBeenCalled with multiple instances

Currently, I am in the process of writing a test case for one of my functions. This function calls another function from a library, and I am attempting to mock this function (saveCall). Below is a snippet of the sample code in question: import { Call } fro ...

javascripttypescriptunit-testingjestjsmocking

Encountering a problem when attempting to add ngrx to an Angular project

I'm currently in the process of setting up ngrx in my Angular application. After running the command ng add @ngrx/store@latest An error occurred with the following details: npm resolution error report 2022-07-07T20:36:16.089Z While resolving: [em ...

angularngrxngrx-store

Tips for updating routerlink in navigation bar in Angular 4

I'm encountering an issue with routing to the wrong routelink. How can I prevent this from happening? My apologies for my lack of experience. The error message displayed in the Chrome console is: ERROR Error: Uncaught (in promise): Error: Cannot mat ...

javascriptangularurlroutes

Tips for implementing the select2 feature in asp.net core:

Currently, I am developing a project in ASP.NET Core and utilizing TypeScript. I am interested in integrating Select2 into my project. Can someone provide guidance on how to incorporate Select2 in ASP.NET Core? Additionally, is there a specific package t ...

c#typescriptasp.net-corejquery-select2

Top Tip for Preventing Angular Version Compatibility Issues

Here is an illustration that delves into my inquiry ----> Version Conflict The dilemma arises when my product has a dependency on a node package, which in turn relies on a specific version of Angular, denoted as version #y. However, my product itself ...

angularjsnode.jsangularnpmnpm-install

Is there a specific directive in Angular that allows for variable declarations using the "

This interesting piece discusses the usage of a let-name directive in the template: <ng-template #testTemplate let-name> <div>User {{ name }} </div> </ng-template> Can anyone tell me if this is a part of the standard ang ...

javascriptangulartypescriptangular-cdk

How should trpc query calls be implemented in a Next.js application for optimal performance?

Transitioning from pure frontend React to Next.js, I am currently working on implementing trpc calls to the backend. While this is a familiar process for me, it seems that the approach I've been using may not be appropriate in this case. const [weight ...

typescriptnext.jsreact-hooksreact-querytrpc

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

htmlcssangularangular-material