Angular 2 cdref detect changes is not working properly - html

Question

This is my form for user or admin. This formed is saved to database using shared service. After clicking button toaster service is not opening. At first click form will be submitted but form not reseted and toaster service will not open.After doule click only toaster opens and form submitted with empty.
<form method="post" class="minimal" #customerForm=ngForm (submit)="addCustomer()" >
<label for="username">
Username:
<input type="text" name="username" id="username" [(ngModel)]="user.username" placeholder="Enter Username" required="required">
</label>
<label for="password">
Password:
<input type="password" name="password" id="password" [(ngModel)]="user.password" placeholder="Enter Password" required="required" />
</label>
<label for="isAdmin">
Admin:
<select class="admin" type="text" name="admin" [(ngModel)]="user.isAdmin" required>
<option>User</option>
<option>Admin</option>
</select>
</label>
<label for="email">
Email:
<input type="email" name="email" id="email" [(ngModel)]="user.emailId" placeholder="Enter Email" required="required" />
</label>
<label for="phone">
Phone No:
<input type="number" name="phone" id="phone" [(ngModel)]="user.phoneNo" placeholder="Enter Phone" required="required" />
</label>
<label for="dob">
Date of Birth:
<input type="date" name="date" id="date" [(ngModel)]="user.dob" placeholder="Enter Date" required="required" />
</label>
<button type="submit" class="btn btn-minimal btn-submit" [disabled]="!customerForm.form.valid">Create</button>
<toaster-container></toaster-container>
This is my ts file
addCustomer() {
console.log("user",this.user);
this.persistanceService.addUser(this.user).subscribe((result: User) => {
this.cdRef.detectChanges();
console.log("admin",this.user.isAdmin)
this.toast();
this.user = new User();
});