Could you please provide an example of material select with 2 way binding and values coming from an API? It seems that in 2 way binding the material select triggers the change event when rendered, and ruins the object that it is bound to when loaded causing and undefined value. the code is following , together with a normal select element that is working fine: ts file import { Observable } from 'rxjs/Observable'; import { DepartmentService } from './../department.service'; import { UserService } from './../user.service'; //import { User } from './../models/user.type'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { IUser } from '../models/user'; import 'rxjs/add/observable/forkJoin'; @Component({ selector:'app-user-card', templateUrl:'./user-card.component.html', styleUrls: ['./user-card.component.scss'] }) export class UserCardComponent implements OnInit { loading:boolean; privatedepartments= []; privateuser:IUser= { id:0, name:' ', department : { id :"0", name:' ' } }; constructor(privateroute:ActivatedRoute, privateuserService:UserService, privatedepartmentService:DepartmentService) { this.route.params.subscribe ( p=> { this.user.id=+p['id'] ||0; }) } ngOnInit() { this.loading=true; varsources= [ this.departmentService.getDepartments(), this.userService.GetUser(this.user.id) ] Observable.forkJoin(sources).subscribe( data=> { console.log(data); data[0].forEach(element=> { this.departments.push( {'value': element.id, 'label' :element.name }); }); //this.departments = this.departments.slice(); if (this.user.department.id) { console.log('Department exists'); } this.setUser(data[1]); this.loading=false; }); } AddDepartment(){ //this.departments.push({value:"2", label:"Test"}) //console.log(this.departments); //this.departments = this.departments.slice(); //this.user.department.id="2"; console.log(this.user); } SelectOnChange(event) { console.log(this.user); console.log(event); } setUser( user:IUser){ this.user.id=user.id; this.user.name=user.name; this.user.department.id=user.department.id ; this.user.department.name=user.department.name console.log("user:" , this.user) } } html <div class="row"> <divclass=col-md-4> <divclass="card card-cascade narrower"> <divclass="view card-header text-center blue-gradient white-text"> <h4class="h4-responsive mb-0">User Card</h4> </div> <divclass="card-body"> <div *ngIf="loading"class="progress primary-color-dark"> <divclass="indeterminate"></div> </div> <form> <divclass="md-form mt-5"> <iclass="fa fa-user prefix gray-text"></i> <inputmdbActivetype="text"id="name"name="name" [(ngModel)]="user.name"> <labelclass="active"for="name">Your Name</label> </div> <divclass="md-form"> <divclass="row"> <divclass="col-md-6"> <mdb-selectname="department" [options]="departments" [(ngModel)]="user.department.id"placeholder="Choose Department"></mdb-select> <labelclass="active">Department</label> </div> </div> </div> <buttonclass="btn btn-primary" (click)="AddDepartment()">Add Department</button> </form> </div> </div> </div> <divclass=col-md-4> <divclass="card card-cascade narrower"> <divclass="view card-header text-center blue-gradient white-text"> <h4class="h4-responsive mb-0">User Card</h4> </div> <divclass="card-body"> <div *ngIf="loading"class="progress primary-color-dark"> <divclass="indeterminate"></div> </div> <form> <divclass="md-form mt-5"> <iclass="fa fa-user prefix gray-text"></i> <inputmdbActivetype="text"id="name"name="name" [(ngModel)]="user.name"> <labelclass="active"for="name">Your Name</label> </div> <divclass="md-form"> <divclass="row"> <divclass="col-md-6"> <labelclass="active">Department</label> </div> </div> </div> <buttonclass="btn btn-primary" (click)="AddDepartment()">Add Department</button> </form> </div> </div> </div> </div> <select class="browser-default mdb-select" [(ngModel)]="user.department.id" name="department"> <option *ngFor="let d of departments"value="{{d.value}}">{{ d.label}}</option> </select> Additionally it seems that mbd-select class cannot be applied to normal select element.

---