I have a priming multi-select drop-down control. On page load, all options should be selected and the selected label should display "All selected". How to fetch the "Select All" checkbox status in priming multi-select control?

When all options are selected, the dropdown displays 3 items selected.

Here instead of 3 items selected, it should display "All". And all the options should be selected by default on page load. Help in resolving this.

AppComponent.html

        <div id="statusdrpdown" #statusdropdown>
          <p-multiSelect [options]="status" [(ngModel)]="selectedStatus" [maxSelectedLabels]="1" class="multiselectcss" [filter]="false" (onPanelShow) =" funShow()"  optionLabel="name"></p-multiSelect>
          <label id="statuslbl" class="drpdownlbl"><br />Status</label>
        </div>


    ----------------------------------------------------------------------------
    App.Component.ts

        import { Component , ViewChild, ElementRef} from '@angular/core';
        import { SampleData } from './sample-data';
        @Component({
         selector: 'my-app',
         templateUrl: './appponent.html',
         styleUrls: [ './appponent.css' ]
        })
        export class AppComponent  {
          @ViewChild("statusdropdown", { read: ElementRef }) tref: ElementRef;
           status: SampleData[];

          selectedStatus: SampleData[];
          constructor() { }

          ngOnInit() {
            this.status = [
          { name: 'Active', value: '1' },
              { name: 'Inactive', value: '2' },
              { name: 'Status-plete-or-active', value: '3' },
        ];
      }
      funShow() {
        var h = this.tref.nativeElement;
        var text = document.createTextNode("All");
        h.childNodes[0].lastChild.lastChild.childNodes[1].childNodes[1].after(text);
      }
    }

    --------------------------------------------------------------------------

    App.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';

    import { AppComponent } from './appponent';
    import { HelloComponent } from './helloponent';
    import { MultiSelectModule } from 'primeng/multiselect';
     import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


    @NgModule({
      imports:      [ BrowserModule, FormsModule, MultiSelectModule, BrowserAnimationsModule],
      declarations: [ AppComponent, HelloComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

---

Primeng version - in package.json

"primeicons": "^1.0.0", "primeng": "^7.0.0-beta.1"

---

SampleData interface - 

export interface SampleData {
    name: string,
    value: string
}

I have a priming multi-select drop-down control. On page load, all options should be selected and the selected label should display "All selected". How to fetch the "Select All" checkbox status in priming multi-select control?

When all options are selected, the dropdown displays 3 items selected.

Here instead of 3 items selected, it should display "All". And all the options should be selected by default on page load. Help in resolving this.

AppComponent.html

        <div id="statusdrpdown" #statusdropdown>
          <p-multiSelect [options]="status" [(ngModel)]="selectedStatus" [maxSelectedLabels]="1" class="multiselectcss" [filter]="false" (onPanelShow) =" funShow()"  optionLabel="name"></p-multiSelect>
          <label id="statuslbl" class="drpdownlbl"><br />Status</label>
        </div>


    ----------------------------------------------------------------------------
    App.Component.ts

        import { Component , ViewChild, ElementRef} from '@angular/core';
        import { SampleData } from './sample-data';
        @Component({
         selector: 'my-app',
         templateUrl: './app.ponent.html',
         styleUrls: [ './app.ponent.css' ]
        })
        export class AppComponent  {
          @ViewChild("statusdropdown", { read: ElementRef }) tref: ElementRef;
           status: SampleData[];

          selectedStatus: SampleData[];
          constructor() { }

          ngOnInit() {
            this.status = [
          { name: 'Active', value: '1' },
              { name: 'Inactive', value: '2' },
              { name: 'Status-plete-or-active', value: '3' },
        ];
      }
      funShow() {
        var h = this.tref.nativeElement;
        var text = document.createTextNode("All");
        h.childNodes[0].lastChild.lastChild.childNodes[1].childNodes[1].after(text);
      }
    }

    --------------------------------------------------------------------------

    App.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';

    import { AppComponent } from './app.ponent';
    import { HelloComponent } from './hello.ponent';
    import { MultiSelectModule } from 'primeng/multiselect';
     import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


    @NgModule({
      imports:      [ BrowserModule, FormsModule, MultiSelectModule, BrowserAnimationsModule],
      declarations: [ AppComponent, HelloComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

---

Primeng version - in package.json

"primeicons": "^1.0.0", "primeng": "^7.0.0-beta.1"

---

SampleData interface - 

export interface SampleData {
    name: string,
    value: string
}

• javascript
• c#
• jquery
• angular

Share Improve this question Follow asked Nov 6, 2018 at 13:00 J.DoeJ.Doe 111 gold badge11 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Try this when your data is present (Constructor, OnInit ..) :

   this.status.map((item) => this.selectedStatus.push(item));

PS: And do not forget to initialize your selectedStatus to empty array so that you can fill it later.

Here is a stackblitz for your case.

You need to set: maxSelectedLabels property to "2" and the selectedItemsLabel to "All selected" in your template markup.