carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update inputdemo | multiselect

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-08 11:30:04 +03:00
parent a6669da4ef
commit 1d816bc0aa
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/pages/uikit/inputdemo.ts
View File

@@ -29,6 +29,7 @@ import { ToggleButtonModule } from 'primeng/togglebutton';
import { CountryService } from '../service/country.service'; import { CountryService } from '../service/country.service';
import { NodeService } from '../service/node.service'; import { NodeService } from '../service/node.service';
import { TreeNode } from 'primeng/api'; import { TreeNode } from 'primeng/api';
import { Country } from '../service/customer.service';
@Component({ @Component({
selector: 'app-input-demo', selector: 'app-input-demo',
@@ -167,7 +168,7 @@ import { TreeNode } from 'primeng/api';
<p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name" placeholder="Select" /> <p-select [(ngModel)]="dropdownValue" [options]="dropdownValues" optionLabel="name" placeholder="Select" />
<div class="font-semibold text-xl">MultiSelect</div> <div class="font-semibold text-xl">MultiSelect</div>
<p-multiselect [(ngModel)]="multiselectValue" [options]="multiselectValues" optionLabel="name" placeholder="Select Countries" [filter]="true"> <p-multiselect [options]="multiselectCountries" [(ngModel)]="multiselectSelectedCountries" placeholder="Select Countries" optionLabel="name" display="chip" [filter]="true">
<ng-template #selecteditems let-countries> <ng-template #selecteditems let-countries>
@for (country of countries; track country.code) { @for (country of countries; track country.code) {
<div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2"> <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2">
@@ -178,8 +179,8 @@ import { TreeNode } from 'primeng/api';
</ng-template> </ng-template>
<ng-template #item let-country> <ng-template #item let-country>
<div class="flex items-center"> <div class="flex items-center">
<span [class]="'mr-2 flag flag-' + country.option.code.toLowerCase()" style="width: 18px; height: 12px"></span> <span [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width: 18px; height: 12px"></span>
<div>{{ country.option.name }}</div> <div>{{ country.name }}</div>
</div> </div>
</ng-template> </ng-template>
</p-multiselect> </p-multiselect>
@@ -281,7 +282,7 @@ export class InputDemo implements OnInit {
dropdownValue: any = null; dropdownValue: any = null;
multiselectValues = [ multiselectCountries: Country[] = [
{ name: 'Australia', code: 'AU' }, { name: 'Australia', code: 'AU' },
{ name: 'Brazil', code: 'BR' }, { name: 'Brazil', code: 'BR' },
{ name: 'China', code: 'CN' }, { name: 'China', code: 'CN' },
@@ -294,7 +295,7 @@ export class InputDemo implements OnInit {
{ name: 'United States', code: 'US' } { name: 'United States', code: 'US' }
]; ];
multiselectValue: any = null; multiselectSelectedCountries!: Country[];
toggleValue: boolean = false; toggleValue: boolean = false;