I have created a component to display API data. The structure of the component is as follows:
HTML:
<div *ngFor="let customer of customers">
<p>Name: {{customer?.name}}</p
<p>Phone: {{customer?.phoneNumbers}}</p
</div>
TS
import { Component, Input } from '@angular/core';
import { Customer } from '../models';
@Component({
selector: 'yn-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
})
export class ContactComponent {
@Input()
public customers: Customer ;
}
An interface Customer has been declared in a file called models.ts. Here is how it looks:
models.ts file
export interface Customer {
name: string;
phoneNumbers: PhoneNumber[];
}
export interface PhoneNumber{
type: string;
displayName: string;
number: string;
}
While I am able to display the name field in the HTML, there seems to be an issue with displaying the phoneNumbers. It currently shows as a link instead of the actual phone numbers:
https://i.stack.imgur.com/tMxi7.png
JSON:
{
"salutation": "Dr",
"jobTitle": "Nurse Practicioner",
"name": "Adaline Danat",
"birthDate": "1964-06-04T06:31:10Z",
"gender": "Female",
"phoneNumbers": [
{
"type": "Unknown",
"displayName": "Mobile",
"number": "+62 342 886 8201"
},
{
"type": "Other",
"displayName": "Home",
"number": "+86 707 128 1882"
},
{
"type": "Business",
"displayName": "Home",
"number": "+63 704 441 1937"
},
],
}