Множественный выбор

import { MultiSelectModule } from 'primeng/multiselect';

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-multiselect',
  templateUrl: './prime-multiselect.component.html',
  styleUrls: ['./prime-multiselect.component.scss']
})
export class PrimeMultiselectComponent implements OnInit {
 
  selectedCities: string[] = [];
  selectedCities1: string[] = [];
  selectedCities2: string[] = [];
  selectedCities3: string[] = [];
  selectedCities4: string[] = [];
  cities: any[] = [];
  selectedCountries1: string[] = [];
  selectedCountries2: string[] = [];
  countries: any[] = [];
  virtualCountries: any[] = [];
  groupedCities: any[] = [];
 
  selectedCitiesXs: string[] = [];
  selectedCitiesSm: string[] = [];
  selectedCitiesDe: string[] = [];
  selectedCitiesLg: string[] = [];
 
  constructor() {
    this.cities = [
      { name: 'New York', code: 'NY' },
      { name: 'Rome', code: 'RM' },
      { name: 'London', code: 'LDN' },
      { name: 'Istanbul', code: 'IST' },
      { name: 'Milan', code: 'PRS' },
      { name: 'Tokyo', code: 'PRS' },
      { name: 'Moscow', code: 'PRS' },
      { name: 'Venice', code: 'PRS' },
      { name: 'Berlin', code: 'PRS' },
    ];
 
    this.countries = [
      { name: 'Australia', code: 'AU' },
      { name: 'Brazil', code: 'BR' },
      { name: 'China', code: 'CN' },
      { name: 'Egypt', code: 'EG' },
      { name: 'France', code: 'FR' },
      { name: 'Germany', code: 'DE' },
      { name: 'India', code: 'IN' },
      { name: 'Japan', code: 'JP' },
      { name: 'Spain', code: 'ES' },
      { name: 'United States', code: 'US' }
    ];
 
    this.groupedCities = [
      {
        label: 'Germany', value: 'de',
        items: [
          { label: 'Berlin', value: 'Berlin' },
          { label: 'Frankfurt', value: 'Frankfurt' },
          { label: 'Hamburg', value: 'Hamburg' },
          { label: 'Munich', value: 'Munich' }
        ]
      },
      {
        label: 'USA', value: 'us',
        items: [
          { label: 'Chicago', value: 'Chicago' },
          { label: 'Los Angeles', value: 'Los Angeles' },
          { label: 'New York', value: 'New York' },
          { label: 'San Francisco', value: 'San Francisco' }
        ]
      },
      {
        label: 'Japan', value: 'jp',
        items: [
          { label: 'Kyoto', value: 'Kyoto' },
          { label: 'Osaka', value: 'Osaka' },
          { label: 'Tokyo', value: 'Tokyo' },
          { label: 'Yokohama', value: 'Yokohama' }
        ]
      }
    ];
 
    this.virtualCountries = [
      { name: 'Afghanistan', 'code': 'AF' },
      { name: 'Åland Islands', 'code': 'AX' },
      { name: 'Albania', 'code': 'AL' },
      { name: 'Algeria', 'code': 'DZ' },
      { name: 'American Samoa', 'code': 'AS' },
      { name: 'Andorra', 'code': 'AD' },
      { name: 'Angola', 'code': 'AO' },
      { name: 'Anguilla', 'code': 'AI' },
      { name: 'Antarctica', 'code': 'AQ' },
      { name: 'Antigua and Barbuda', 'code': 'AG' },
      { name: 'Argentina', 'code': 'AR' },
      { name: 'Armenia', 'code': 'AM' },
      { name: 'Aruba', 'code': 'AW' },
      { name: 'Australia', 'code': 'AU' },
      { name: 'Austria', 'code': 'AT' },
      { name: 'Azerbaijan', 'code': 'AZ' },
      { name: 'Bahamas', 'code': 'BS' },
      { name: 'Bahrain', 'code': 'BH' },
      { name: 'Bangladesh', 'code': 'BD' },
      { name: 'Barbados', 'code': 'BB' },
      { name: 'Belarus', 'code': 'BY' },
      { name: 'Belgium', 'code': 'BE' },
      { name: 'Belize', 'code': 'BZ' },
      { name: 'Benin', 'code': 'BJ' },
      { name: 'Bermuda', 'code': 'BM' },
      { name: 'Bhutan', 'code': 'BT' },
      { name: 'Bolivia', 'code': 'BO' },
      { name: 'Bosnia and Herzegovina', 'code': 'BA' },
      { name: 'Botswana', 'code': 'BW' },
      { name: 'Bouvet Island', 'code': 'BV' },
      { name: 'Brazil', 'code': 'BR' },
      { name: 'British Indian Ocean Territory', 'code': 'IO' },
      { name: 'Brunei Darussalam', 'code': 'BN' },
      { name: 'Bulgaria', 'code': 'BG' },
      { name: 'Burkina Faso', 'code': 'BF' },
      { name: 'Burundi', 'code': 'BI' },
      { name: 'Cambodia', 'code': 'KH' },
      { name: 'Cameroon', 'code': 'CM' },
      { name: 'Canada', 'code': 'CA' },
      { name: 'Cape Verde', 'code': 'CV' },
      { name: 'Cayman Islands', 'code': 'KY' },
      { name: 'Central African Republic', 'code': 'CF' },
      { name: 'Chad', 'code': 'TD' },
      { name: 'Chile', 'code': 'CL' },
      { name: 'China', 'code': 'CN' },
      { name: 'Christmas Island', 'code': 'CX' },
      { name: 'Cocos (Keeling) Islands', 'code': 'CC' },
      { name: 'Colombia', 'code': 'CO' },
      { name: 'Comoros', 'code': 'KM' },
      { name: 'Congo', 'code': 'CG' },
      { name: 'Congo, The Democratic Republic of the', 'code': 'CD' },
      { name: 'Cook Islands', 'code': 'CK' },
      { name: 'Costa Rica', 'code': 'CR' },
      { name: 'Cote D\'Ivoire', 'code': 'CI' },
      { name: 'Croatia', 'code': 'HR' },
      { name: 'Cuba', 'code': 'CU' },
      { name: 'Cyprus', 'code': 'CY' },
      { name: 'Czech Republic', 'code': 'CZ' },
      { name: 'Denmark', 'code': 'DK' },
      { name: 'Djibouti', 'code': 'DJ' },
      { name: 'Dominica', 'code': 'DM' },
      { name: 'Dominican Republic', 'code': 'DO' },
      { name: 'Ecuador', 'code': 'EC' },
      { name: 'Egypt', 'code': 'EG' },
      { name: 'El Salvador', 'code': 'SV' },
      { name: 'Equatorial Guinea', 'code': 'GQ' },
      { name: 'Eritrea', 'code': 'ER' },
      { name: 'Estonia', 'code': 'EE' },
      { name: 'Ethiopia', 'code': 'ET' },
      { name: 'Falkland Islands (Malvinas)', 'code': 'FK' },
      { name: 'Faroe Islands', 'code': 'FO' },
      { name: 'Fiji', 'code': 'FJ' },
      { name: 'Finland', 'code': 'FI' },
      { name: 'France', 'code': 'FR' },
      { name: 'French Guiana', 'code': 'GF' },
      { name: 'French Polynesia', 'code': 'PF' },
      { name: 'French Southern Territories', 'code': 'TF' },
      { name: 'Gabon', 'code': 'GA' },
      { name: 'Gambia', 'code': 'GM' },
      { name: 'Georgia', 'code': 'GE' },
      { name: 'Germany', 'code': 'DE' },
      { name: 'Ghana', 'code': 'GH' },
      { name: 'Gibraltar', 'code': 'GI' },
      { name: 'Greece', 'code': 'GR' },
      { name: 'Greenland', 'code': 'GL' },
      { name: 'Grenada', 'code': 'GD' },
      { name: 'Guadeloupe', 'code': 'GP' },
      { name: 'Guam', 'code': 'GU' },
      { name: 'Guatemala', 'code': 'GT' },
      { name: 'Guernsey', 'code': 'GG' },
      { name: 'Guinea', 'code': 'GN' },
      { name: 'Guinea-Bissau', 'code': 'GW' },
      { name: 'Guyana', 'code': 'GY' },
      { name: 'Haiti', 'code': 'HT' },
      { name: 'Heard Island and Mcdonald Islands', 'code': 'HM' },
      { name: 'Holy See (Vatican City State)', 'code': 'VA' },
      { name: 'Honduras', 'code': 'HN' },
      { name: 'Hong Kong', 'code': 'HK' },
      { name: 'Hungary', 'code': 'HU' },
      { name: 'Iceland', 'code': 'IS' },
      { name: 'India', 'code': 'IN' },
      { name: 'Indonesia', 'code': 'ID' },
      { name: 'Iran, Islamic Republic Of', 'code': 'IR' },
      { name: 'Iraq', 'code': 'IQ' },
      { name: 'Ireland', 'code': 'IE' },
      { name: 'Isle of Man', 'code': 'IM' },
      { name: 'Israel', 'code': 'IL' },
      { name: 'Italy', 'code': 'IT' },
      { name: 'Jamaica', 'code': 'JM' },
      { name: 'Japan', 'code': 'JP' },
      { name: 'Jersey', 'code': 'JE' },
      { name: 'Jordan', 'code': 'JO' },
      { name: 'Kazakhstan', 'code': 'KZ' },
      { name: 'Kenya', 'code': 'KE' },
      { name: 'Kiribati', 'code': 'KI' },
      { name: 'Korea, Democratic People\'S Republic of', 'code': 'KP' },
      { name: 'Korea, Republic of', 'code': 'KR' },
      { name: 'Kuwait', 'code': 'KW' },
      { name: 'Kyrgyzstan', 'code': 'KG' },
      { name: 'Lao People\'S Democratic Republic', 'code': 'LA' },
      { name: 'Latvia', 'code': 'LV' },
      { name: 'Lebanon', 'code': 'LB' },
      { name: 'Lesotho', 'code': 'LS' },
      { name: 'Liberia', 'code': 'LR' },
      { name: 'Libyan Arab Jamahiriya', 'code': 'LY' },
      { name: 'Liechtenstein', 'code': 'LI' },
      { name: 'Lithuania', 'code': 'LT' },
      { name: 'Luxembourg', 'code': 'LU' },
      { name: 'Macao', 'code': 'MO' },
      { name: 'Macedonia, The Former Yugoslav Republic of', 'code': 'MK' },
      { name: 'Madagascar', 'code': 'MG' },
      { name: 'Malawi', 'code': 'MW' },
      { name: 'Malaysia', 'code': 'MY' },
      { name: 'Maldives', 'code': 'MV' },
      { name: 'Mali', 'code': 'ML' },
      { name: 'Malta', 'code': 'MT' },
      { name: 'Marshall Islands', 'code': 'MH' },
      { name: 'Martinique', 'code': 'MQ' },
      { name: 'Mauritania', 'code': 'MR' },
      { name: 'Mauritius', 'code': 'MU' },
      { name: 'Mayotte', 'code': 'YT' },
      { name: 'Mexico', 'code': 'MX' },
      { name: 'Micronesia, Federated States of', 'code': 'FM' },
      { name: 'Moldova, Republic of', 'code': 'MD' },
      { name: 'Monaco', 'code': 'MC' },
      { name: 'Mongolia', 'code': 'MN' },
      { name: 'Montserrat', 'code': 'MS' },
      { name: 'Morocco', 'code': 'MA' },
      { name: 'Mozambique', 'code': 'MZ' },
      { name: 'Myanmar', 'code': 'MM' },
      { name: 'Namibia', 'code': 'NA' },
      { name: 'Nauru', 'code': 'NR' },
      { name: 'Nepal', 'code': 'NP' },
      { name: 'Netherlands', 'code': 'NL' },
      { name: 'Netherlands Antilles', 'code': 'AN' },
      { name: 'New Caledonia', 'code': 'NC' },
      { name: 'New Zealand', 'code': 'NZ' },
      { name: 'Nicaragua', 'code': 'NI' },
      { name: 'Niger', 'code': 'NE' },
      { name: 'Nigeria', 'code': 'NG' },
      { name: 'Niue', 'code': 'NU' },
      { name: 'Norfolk Island', 'code': 'NF' },
      { name: 'Northern Mariana Islands', 'code': 'MP' },
      { name: 'Norway', 'code': 'NO' },
      { name: 'Oman', 'code': 'OM' },
      { name: 'Pakistan', 'code': 'PK' },
      { name: 'Palau', 'code': 'PW' },
      { name: 'Palestinian Territory, Occupied', 'code': 'PS' },
      { name: 'Panama', 'code': 'PA' },
      { name: 'Papua New Guinea', 'code': 'PG' },
      { name: 'Paraguay', 'code': 'PY' },
      { name: 'Peru', 'code': 'PE' },
      { name: 'Philippines', 'code': 'PH' },
      { name: 'Pitcairn', 'code': 'PN' },
      { name: 'Poland', 'code': 'PL' },
      { name: 'Portugal', 'code': 'PT' },
      { name: 'Puerto Rico', 'code': 'PR' },
      { name: 'Qatar', 'code': 'QA' },
      { name: 'Reunion', 'code': 'RE' },
      { name: 'Romania', 'code': 'RO' },
      { name: 'Russian Federation', 'code': 'RU' },
      { name: 'RWANDA', 'code': 'RW' },
      { name: 'Saint Helena', 'code': 'SH' },
      { name: 'Saint Kitts and Nevis', 'code': 'KN' },
      { name: 'Saint Lucia', 'code': 'LC' },
      { name: 'Saint Pierre and Miquelon', 'code': 'PM' },
      { name: 'Saint Vincent and the Grenadines', 'code': 'VC' },
      { name: 'Samoa', 'code': 'WS' },
      { name: 'San Marino', 'code': 'SM' },
      { name: 'Sao Tome and Principe', 'code': 'ST' },
      { name: 'Saudi Arabia', 'code': 'SA' },
      { name: 'Senegal', 'code': 'SN' },
      { name: 'Serbia and Montenegro', 'code': 'CS' },
      { name: 'Seychelles', 'code': 'SC' },
      { name: 'Sierra Leone', 'code': 'SL' },
      { name: 'Singapore', 'code': 'SG' },
      { name: 'Slovakia', 'code': 'SK' },
      { name: 'Slovenia', 'code': 'SI' },
      { name: 'Solomon Islands', 'code': 'SB' },
      { name: 'Somalia', 'code': 'SO' },
      { name: 'South Africa', 'code': 'ZA' },
      { name: 'South Georgia and the South Sandwich Islands', 'code': 'GS' },
      { name: 'Spain', 'code': 'ES' },
      { name: 'Sri Lanka', 'code': 'LK' },
      { name: 'Sudan', 'code': 'SD' },
      { name: 'Suriname', 'code': 'SR' },
      { name: 'Svalbard and Jan Mayen', 'code': 'SJ' },
      { name: 'Swaziland', 'code': 'SZ' },
      { name: 'Sweden', 'code': 'SE' },
      { name: 'Switzerland', 'code': 'CH' },
      { name: 'Syrian Arab Republic', 'code': 'SY' },
      { name: 'Taiwan, Republic of China', 'code': 'TW' },
      { name: 'Tajikistan', 'code': 'TJ' },
      { name: 'Tanzania, United Republic of', 'code': 'TZ' },
      { name: 'Thailand', 'code': 'TH' },
      { name: 'Timor-Leste', 'code': 'TL' },
      { name: 'Togo', 'code': 'TG' },
      { name: 'Tokelau', 'code': 'TK' },
      { name: 'Tonga', 'code': 'TO' },
      { name: 'Trinidad and Tobago', 'code': 'TT' },
      { name: 'Tunisia', 'code': 'TN' },
      { name: 'Turkey', 'code': 'TR' },
      { name: 'Turkmenistan', 'code': 'TM' },
      { name: 'Turks and Caicos Islands', 'code': 'TC' },
      { name: 'Tuvalu', 'code': 'TV' },
      { name: 'Uganda', 'code': 'UG' },
      { name: 'Ukraine', 'code': 'UA' },
      { name: 'United Arab Emirates', 'code': 'AE' },
      { name: 'United Kingdom', 'code': 'GB' },
      { name: 'United States', 'code': 'US' },
      { name: 'United States Minor Outlying Islands', 'code': 'UM' },
      { name: 'Uruguay', 'code': 'UY' },
      { name: 'Uzbekistan', 'code': 'UZ' },
      { name: 'Vanuatu', 'code': 'VU' },
      { name: 'Venezuela', 'code': 'VE' },
      { name: 'Viet Nam', 'code': 'VN' },
      { name: 'Virgin Islands, British', 'code': 'VG' },
      { name: 'Virgin Islands, U.S.', 'code': 'VI' },
      { name: 'Wallis and Futuna', 'code': 'WF' },
      { name: 'Western Sahara', 'code': 'EH' },
      { name: 'Yemen', 'code': 'YE' },
      { name: 'Zambia', 'code': 'ZM' },
      { name: 'Zimbabwe', 'code': 'ZW' }
    ];
  }
 
  ngOnInit(): void {
  }
 
}

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name" selectedItemsLabel="{0} items selected"></p-multiSelect>

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name" selectedItemsLabel="{0} items selected"></p-multiSelect>

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name"></p-multiSelect>

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities3" defaultLabel="Select a City" optionLabel="name" display="chip"></p-multiSelect>

<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities4" defaultLabel="Select a City" scrollHeight="250px" display="chip">
  <ng-template let-group pTemplate="group">
    <div class="p-d-flex p-ai-center">
      <span> { { group.label } } </span>
    </div>
  </ng-template>
</p-multiSelect>

<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries1" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
  <ng-template let-value pTemplate="selectedItems">
    <div class="country-item country-item-value" *ngFor="let option of selectedCountries1">
      <div> { { option.name } } </div>
    </div>
    <div *ngIf="!selectedCountries1 || selectedCountries1.length === 0" class="country-placeholder">
      Select Countries
    </div>
  </ng-template>
  <ng-template let-country pTemplate="item">
    <div class="country-item">
      <div> { { country.name } } </div>
    </div>
  </ng-template>
</p-multiSelect>

<p-multiSelect [options]="virtualCountries" [showToggleAll]="false" [(ngModel)]="selectedCountries2" optionLabel="name" [virtualScroll]="true" [filter]="true" [itemSize]="34" class="multiselect-custom-virtual-scroll">
  <ng-template let-country pTemplate="item">
    <div class="country-item">
      <div> { { country.name } } </div>
    </div>
  </ng-template>
</p-multiSelect>

<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCitiesXs"
  defaultLabel="Extra small"
  optionLabel="name"
  class="p-multiselect-xs"
></p-multiSelect>
 
<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCitiesSm"
  defaultLabel="Small"
  optionLabel="name"
  class="p-multiselect-sm"
></p-multiSelect>
 
<p-multiSelect [options]="cities" [(ngModel)]="selectedCitiesDe" defaultLabel="Default" optionLabel="name"></p-multiSelect>
 
<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCitiesLg"
  defaultLabel="Large"
  optionLabel="name"
  class="p-multiselect-lg"
></p-multiSelect>

<span class="p-float-label">
  <p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" optionLabel="name" selectedItemsLabel="{0} items selected" inputId="basic"></p-multiSelect>
  <label for="basic">Basic</label>
</span>