Hi,
*Background:*
I've created a custom control that ultimately sets an ID. The main object
is of type "Project" and has a property called "ContactID". The custom
control I've created allows to set that ContactID.
The custom control uses angular material's mat-autocomplete. The problem I
am having is that I don't want to show the selected Contact's ID
(ContactID) in the UI. I rather want to show the Contact's Name.
*My Problem:*
I am trying to use the [displayWith] attribute in order to get to the
Contact's name. However, in order to do that, I need to make a HTTP request
and then return it. That is somehow not working. Bear in mind, the custom
control's sole responsibility is to deal with the ContactID. That's all it
knows.
*Source Code:*
Mark-up of the page consuming my custom control
<w1-contact-autocomplete-directive *ngIf="isEditMode"
name="contactId"
[(ngModel)]="projectMarketing.detail.contactId"
[disabled]=
"!w1UserContextService.userCanWriteDataField('project','contact')"></
w1-contact-autocomplete-directive>
*Custom Control Mark-up*
<form #contactAutocompleteForm="ngForm"
novalidate>
<mat-form-field class="width100 marginBottom10px"
appearance="outline">
<mat-label>Type to find Contact</mat-label>
<input type="text"
name="contact"
matInput
[matAutocomplete]="autoContact"
[disabled]="disabled"
[(ngModel)]="value"
(ngModelChange)="contactSearchQueryChanged($event)" />
<button mat-button
*ngIf="value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="clearContactSelection()">
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete #autoContact="matAutocomplete"
[displayWith]="displayContactFullName.bind(this)">
<mat-option *ngFor="let contact of contacts|async"
[value]="contact.id">
{{contact.detail.fullName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
*Custom Control Code: (This is where is issue lies). How can I return from
"subscribe"?*
displayContactFullName(contactId: string) {
if (contactId) {
return this.contactService.getContact(contactId).subscribe(rawContact => {
this.contact = new Contact(rawContact);
let returnValue = this.contact.detail.fullName;
console.log(returnValue);
return returnValue;
});
}
else {
return contactId;
}
}
Thank you
--Tolga
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
