New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Unable to find Multi-Selection dropdown in any of demos


Hello KeenThemes,

Thank you for your previous help.

I'm currently using Angular for my UI, and while working with dropdowns, I've noticed that most of the demos feature single-selection dropdowns. However, as per my requirements, I need a multi-selection dropdown using KeenThemes.

Could you please guide me or provide an example that supports multiple selections?

This is my single selection dropdown code
<div *ngIf="templateModel.scope == 2" class="col-md-6 fv-row mb-7">
<label for="group" class="required fw-semibold fs-6 mb-2">Group</label>
<div>
<select class="form-select form-select-solid"
data-kt-select2="true" data-placeholder="Select option"
data-allow-clear="true" name="groupId"
[(ngModel)]="templateModel.groupId" #group="ngModel"
required
[disabled]="isDisableAccount()">
<option *ngFor="let option of groupsData"
[value]="option.id">{{ option.name }}
</option>
</select>
<div *ngIf="group.invalid && (group.dirty || group.touched)"
class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
<div *ngIf="group.errors?.['required']">group is required</div>
</div>
</div>
</div>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi

You mainly need to:

Add multiple to your <select>.

Adjust the binding to handle an array (e.g. [(ngModel)]="templateModel.groupIds").

Make sure groupsData stays compatible (should be a list of {id, name}).


<div *ngIf="templateModel.scope == 2" class="col-md-6 fv-row mb-7">
<label for="group" class="required fw-semibold fs-6 mb-2">Group</label>
<div>
<select
class="form-select form-select-solid"
data-kt-select2="true"
data-placeholder="Select options"
data-allow-clear="true"
name="groupIds"
multiple
[(ngModel)]="templateModel.groupIds"
#group="ngModel"
required
[disabled]="isDisableAccount()"
>
<option *ngFor="let option of groupsData" [value]="option.id">
{{ option.name }}
</option>
</select>

<div
*ngIf="group.invalid && (group.dirty || group.touched)"
class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"
>
<div *ngIf="group.errors?.["required"]">At least one group is required</div>
</div>
</div>
</div>


[(ngModel)]="templateModel.groupIds" should be an array like [1, 2, 3].

You might also need to re-trigger KTApp.initComponents() (or however KeenThemes bootstraps) if you dynamically load this field.

If you're using validation, make sure to handle it for arrays.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(