Display Phone Details Through Loop

Ramco Ramco

In below data i want to display Father Phone Details data through loop in HTml. We are using Angular 17. If there is only one say "HOME" then it should be displayed like below

Home

3564898976

{
    "id": "4fc922b0-08e0-45cf-a951-495fbdaaf88b",
    "effectiveFrom": null,
    "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81",
    "primaryEmail": "[email protected]",
    "currentStatus": "REGISTERED",
    "admissionNumber": "ADM2024001",
    "registrationNumber": "REG2024001",
    "backgroundVerification": "Complete",
    "backgroundVerificationRemarks": "Passed all checks",
    "parentEligibility": "Eligible",
    "parentEligibilityRemarks": "Meets eligibility criteria",
    "verbalSkills": "Good",
    "verbalSkillsRemarks": "Excellent communication",
    "writtenSkills": "Average",
    "writtenSkillsRemarks": "Needs improvement in writing",
    "medicalFitnessRemarks": "Fit for school activities",
    "height": 150,
    "weight": 45.5,
    "bloodGroup": "A_POSITIVE",
    "gender": "MALE",
    "hairColor": "BLACK",
    "disabilityId": "cce76c42-4165-4bc7-99ed-f25f2754238f",
    "disabilityDescription": "None",
    "doctorContact": "9876543210",
    "doctorName": "Dr. Smith",
    "academicClassSectionId": null,
    "academicSessionId": "e34894db-c03f-44c2-b5b1-3b728230e5ef",
    "academicClassId": "3621f296-29a7-4165-9960-65e4103463fb",
    "academicClassName": "5",
    "houseId": "135583ce-e93c-48c6-9e8b-cf1a12609279",
    "boardingHouseId": null,
    "dateOfBirth": "2018-05-15T00:00:00.000+00:00",
    "reservationCategoryId": "eabf3cd3-f054-48b4-9a5c-545cb0f8227e",
    "userId": null,
    "username": "[email protected]",
    "countryId": "037a25bf-e247-4436-9944-0feb1010feb1",
    "boardingType": "BOARDER",
    "phoneType": "SMS",
    "localContactNumber": "+1-234-567-8900",
    "aadhaarNumber": 123456789012,
    "birthCity": "New York",
    "nickName": "Johnny",
    "notes": "Likes playing soccer",
    "passportNumber": "ABC123456",
    "previousSchool": "ABC School",
    "previousSchoolCity": "New York",
    "securityDescription": "None",
    "quotaId": "6c367b68-dd03-40d5-bc70-5792ce8e6b7b",
    "religionId": "5722e3b5-fdeb-4fc5-b533-a458f71058a9",
    "customField1": "Value1",
    "customFieldLabel1": "Field1",
    "customField2": "Value2",
    "customFieldLabel2": "Field2",
    "customField3": "Value3",
    "customFieldLabel3": "Field3",
    "customField4": "Value4",
    "customFieldLabel4": "Field4",
    "customField5": "Value5",
    "customFieldLabel5": "Field5",
    "languageIds": null,
    "careGiverIds": null,
    "siblingIds": null,
    "caregivers": [
        {
            "id": "58ce2b6f-a187-4a74-9667-6711b2c0d21b",
            "effectiveFrom": null,
            "deletedAt": null,
            "createdAt": "2024-07-15T12:51:12.888759Z",
            "updatedAt": null,
            "createdBy": "vishal.singhal",
            "updatedBy": null,
            "branchId": "ae8e930b-0d60-4cb7-8c39-ce953b036e81",
            "dateOfBirth": "1973-08-20",
            "department": "Human Resources",
            "firstName": "Neha",
            "lastName": "Thakur",
            "middleName": "Singh",
            "fullName": "Neha Singh Thakur",
            "emailDetails": [
                {
                    "emailType": "PERSONAL",
                    "email": "[email protected]"
                }
            ],
            "phoneDetails": [
                {
                    "phoneType": "MOBILE",
                    "phoneNumber": "867546346456"
                },
                {
                    "phoneType": "HOME",
                    "phoneNumber": "3543453535345"
                }
            ],

Thanks

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Joshi2y ago
Hello Ramco,

You can use ngFor to display phone details through loop.

Try the below HTML code.
```
  
      {{ phoneDetail.phoneType }}

      {{ phoneDetail.phoneNumber }}
  
```
Thanks

Vishal Joshi
+1

Aman Gupta2y ago

Hi Ramco,

To display the father's phone details in Angular 17, you can use the following approach. First, ensure your component has the data structure, then iterate through the phoneDetails array to display the phone details conditionally.

You can refer from here.

Component TypeScript File (e.g., app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  caregivers = [
    {
      id: '58ce2b6f-a187-4a74-9667-6711b2c0d21b',
      effectiveFrom: null,
      deletedAt: null,
      createdAt: '2024-07-15T12:51:12.888759Z',
      updatedAt: null,
      createdBy: 'vishal.singhal',
      updatedBy: null,
      branchId: 'ae8e930b-0d60-4cb7-8c39-ce953b036e81',
      dateOfBirth: '1973-08-20',
      department: 'Human Resources',
      firstName: 'Neha',
      lastName: 'Thakur',
      middleName: 'Singh',
      fullName: 'Neha Singh Thakur',
      emailDetails: [
        {
          emailType: 'PERSONAL',
          email: '[email protected]'
        }
      ],
      phoneDetails: [
        {
          phoneType: 'MOBILE',
          phoneNumber: '867546346456'
        },
        {
          phoneType: 'HOME',
          phoneNumber: '3543453535345'
        }
      ]
    }
  ];
}

Component HTML File (e.g., app.component.html)


  
    
      {{ phoneDetail.phoneType }}

      {{ phoneDetail.phoneNumber }}

This will display the phone details for each caregiver, specifically showing the "HOME" phone details when available.

Thanks