How can I get whole (selected) objects from multiselect - Angular

Question

I'm trying to get out whole objects from multiselect dropdown, which I added to my angular template.

But I don't know how to do it, I get id's without problems, but when I try with whole object I can't get it and it shows in console [object Object].

<!-- Select All option -->
<div class="form-group row">
<label class="col-form-label col-lg-3">Roles:</label>
<div class="col-lg-9">
  <select id="applicationModuleFormSelect" name="applicationModuleFormSelect"  [(ngModel)]="amf" class="form-control multiselect-select-all" multiple="multiple" data-fouc>
    <option *ngFor="let amf of appModuleForms;" [value]="amf">{{amf.title}}</option>
  </select>
</div>
</div>
<!-- /select All option -->

 onSubmit() {
    var selectedAppForms = $('#applicationModuleFormSelect').val();
    console.log((selectedAppForms));
}

As you can see I wrote [value]="amf", and in console I got this:

[![enter image description here][1]][1]

Also if I apply JSON.stringify I'm getting similar results:

["1: Object","3: Object"]

Thanks guys Cheers

Answer 1

use [(ngModel)]="selectedData"

Stackblitz Demo

<div class="form-group row">
<label class="col-form-label col-lg-3">Roles:</label>
<div class="col-lg-9">
  <select id="applicationModuleFormSelect" name="applicationModuleFormSelect"  [(ngModel)]="selectedData" class="form-control multiselect-select-all" multiple="multiple" data-fouc>
    <option *ngFor="let amf of appModuleForms;" [value]="amf">{{amf.title}}</option>
  </select>
</div>
</div>