I have recently set up a multi select dropdown with checkboxes by following the instructions provided in this post: https://github.com/NileshPatel17/ng-multiselect-dropdown
This is how I implemented it:
<div (mouseleave)="showDropDown = false" [class.disabled]="disabled">
<button class="drop-toggle btn flat" (click)="showDropDown=!showDropDown">
<span *ngIf="checkedList.length <= 0">{{_placeholder}}</span>
<span *ngIf="checkedList.length > 0">{{buttonText()}}</span>
<i class="fa fa-angle-down"></i>
</button>
<div class="drop-show" *ngIf="showDropDown" >
<label *ngFor="let item of _data">
<input type="checkbox" value="item.id" [(ngModel)]="item.checked" (change)="getSelectedValue(item)" />
<span>{{item.text}}</span>
</label>
</div>
</div>
export class MultiselectDropdownComponent implements OnInit {
...
}
...
In my child component, I use it like this:
<div class="col-sm-6">
<ct-multiselect-dropdown [data]="myData"
[settings]="multiDropdownSettings"
[placeholder]="'Select Data'"
[selectedPlaceholder]="'Data Selected'"></ct-multiselect-dropdown>
</div>
On my parent component, there's a button click as:
submitClicked() {
}
While for other controls, like text inputs in my child control, I can check if they are empty or not using:
this.myForm.get('mycontrol').value;
But how do I achieve the same for my multi select control above?
Is there another method from my button click event in the parent component to determine if this control has any selected data or not?
Thank you