Developer Center

I have this contactdetail model where i have this:
export class Contact{
public displayname:string;
constructor(){}
}
In my component contactdetail.component.ts i have this:
export class ContactDetail implements OnInit {
contactDetails: Contact = new Contact();
constructor() { }
ngOnInit() { }
}
In my contactdetail.template.html i have this:
<input type="text" class="form-control-full" placeholder="-" [(ngModel)]="contactDetails.displayname" [ngModelOptions]="{standalone: true}">
Now i have another component preview where i have this:
#ViewChild( ContactDetail ) contactDetailForm: ContactDetail;
But i do this i get an error:
this.contactDetailForm.contactDetails.displayname = contact.displayname;
Any suggestion why is that?
This is where im using contactdetail component:
<z-card-basic title="Details" *ngIf="showSubTab('Contact')" (pinButtonClicked)="pinTab($event)" [buttons]="customTabButtons" block="block-tab-grid" header="block-header-grey" body="no-padding" >
<contact-detail></contact-detail>
</z-card-basic>