Skip to content

Commit

Permalink
#9772 Doc for MultiSelect
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jan 18, 2021
1 parent cafbc72 commit 250dab6
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 3 deletions.
80 changes: 77 additions & 3 deletions src/app/showcase/components/multiselect/multiselectdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,16 @@ <h5>Templating</h5>
</div>
</ng-template>
</p-multiSelect>

<h5>Grouped</h5>
<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities3" 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>
</p-multiSelect>

<h5>Virtual Scroll (10000 Items)</h5>
<p-multiSelect [options]="virtualCountries" [showToggleAll]="false" [(ngModel)]="selectedCountries2" optionLabel="name" [virtualScroll]="true" [filter]="true" [itemSize]="34" class="multiselect-custom-virtual-scroll">
Expand Down Expand Up @@ -164,7 +174,8 @@ <h5>Model Driven Forms</h5>

<h5>Custom Content</h5>
<p>For custom content support when displaying options, define a ng-template named <i>item</i> where the local ng-template variable refers to an option in the options collection.
Similarly <i>selectedItems</i> template can be used to customize when displaying the selected options. Additionally a custom header and footer can be provided using <i>header</i> and <i>footer</i> templates.</p>
Similarly <i>selectedItems</i> template can be used to customize when displaying the selected options. Additionally a custom header and footer can be provided using <i>header</i> and <i>footer</i> templates.
In addition when grouping is enabled, <i>group</i> template is available to customize the option groups. All templates get the option instance as the default local template variable.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom"&gt;
Expand Down Expand Up @@ -410,6 +421,24 @@ <h5>Properties</h5>
<td>disabled</td>
<td>Name of the disabled field of an option.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>label</td>
<td>Name of the label field of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>items</td>
<td>Name of the options field of an option group.</td>
</tr>
<tr>
<td>group</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display options as grouped when nested options are provided.</td>
</tr>
<tr>
<td>overlayVisible</td>
<td>boolean</td>
Expand Down Expand Up @@ -664,6 +693,16 @@ <h5>Dependencies</h5>
&lt;/ng-template&gt;
&lt;/p-multiSelect&gt;

&lt;h5&gt;Grouped&lt;/h5&gt;
&lt;p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities3" defaultLabel="Select a City" crollHeight="250px" display="chip"&gt;
&lt;ng-template let-group pTemplate="group"&gt;
&lt;div class="p-d-flex p-ai-center"&gt;
&lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/&gt;
&lt;span&gt;&#123;&#123;group.label&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/ng-template&gt;
&lt;/p-multiSelect&gt;

&lt;h5&gt;Virtual Scroll (10000 Items)&lt;/h5&gt;
&lt;p-multiSelect [options]="virtualCountries" [showToggleAll]="false" [(ngModel)]="selectedCountries2" optionLabel="name" [virtualScroll]="true" [filter]="true" [itemSize]="34" class="multiselect-custom-virtual-scroll"&gt;
&lt;ng-template let-country pTemplate="item"&gt;
Expand Down Expand Up @@ -698,13 +737,17 @@ <h5>Dependencies</h5>
selectedCities1: City[];

selectedCities2: City[];


selectedCities3: any[];

selectedCountries1: Country[];

selectedCountries2: Country[];

cities: City[];

groupedCities: SelectItemGroup[];

countries: City[];

virtualCountries: Country[];
Expand All @@ -731,10 +774,41 @@ <h5>Dependencies</h5>
&#123;name: 'United States', code: 'US'&#125;
];

this.countryService.getCountries().then(countries => &#123;
this.groupedCities = [
&#123;
label: 'Germany', value: 'de',
items: [
&#123;label: 'Berlin', value: 'Berlin'&#125;,
&#123;label: 'Frankfurt', value: 'Frankfurt'&#125;,
&#123;label: 'Hamburg', value: 'Hamburg'&#125;,
&#123;label: 'Munich', value: 'Munich'&#125;
]
&#125;,
&#123;
label: 'USA', value: 'us',
items: [
&#123;name: 'Chicago', value: 'Chicago'&#125;,
&#123;name: 'Los Angeles', value: 'Los Angeles'&#125;,
&#123;name: 'New York', value: 'New York'&#125;,
&#123;name: 'San Francisco', value: 'San Francisco'&#125;
]
&#125;,
&#123;
label: 'Japan', value: 'jp',
items: [
&#123;name: 'Kyoto', value: 'Kyoto'&#125;,
&#123;name: 'Osaka', value: 'Osaka'&#125;,
&#123;name: 'Tokyo', value: 'Tokyo'&#125;,
&#123;name: 'Yokohama', value: 'Yokohama'&#125;
]
&#125;
];

this.countryService.getCountries().then(countries =&gt; &#123;
this.virtualCountries = countries;
&#125;);
&#125;

&#125;
</app-code>

Expand Down
35 changes: 35 additions & 0 deletions src/app/showcase/components/multiselect/multiselectdemo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {Component} from '@angular/core';
import {CountryService} from '../../service/countryservice';
import {SelectItemGroup} from 'primeng/api';

interface City {
name: string,
Expand All @@ -20,13 +21,17 @@ export class MultiSelectDemo {
selectedCities1: City[];

selectedCities2: City[];

selectedCities3: any[];

selectedCountries1: Country[];

selectedCountries2: Country[];

cities: City[];

groupedCities: SelectItemGroup[];

countries: City[];

virtualCountries: Country[];
Expand All @@ -53,6 +58,36 @@ export class MultiSelectDemo {
{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.countryService.getCountries().then(countries => {
this.virtualCountries = countries;
});
Expand Down

0 comments on commit 250dab6

Please sign in to comment.