Not able to show all the data from database to the angular project

I'm developing one project and in that i've used Angular for frontend, Asp.net for API and SQL-SERVER For Database. I'm wanted to show all the data from backend to the front api but not able to do show. I'v mentioned the code below, kindly help me.

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Country</th>
            <th>State</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let addr of service.AddressDetailsList">
            <td>{{addr.AddressID}}</td>
            <td>{{addr.Country}}</td>
            <td>{{addr.State}}</td>
            <td>{{addr.City}}</td>
        </tr>
    </tbody>
</table>

import { Component, OnInit } from '@angular/core';
import { FormDetailsService } from 'src/app/Services/form-details.service';

@Component({
  selector: 'app-home-coming',
  templateUrl: './home-coming.component.html',
  styleUrls: ['./home-coming.component.css']
})
export class HomeComingComponent implements OnInit {

  constructor(public service:FormDetailsService) { }

  ngOnInit(): void {
    this.service.getAddressDetailsnew().subscribe(data=>{
      this.service.AddressDetailsList=data;
    })
    
  }

}

readonly baseurl="http://localhost:5157/api/RegistrationFormDetails/";
  getAllState():Observable<RegistrationFormDetails[]>{
    return this.http.get<RegistrationFormDetails[]>(this.baseurl);
  }

  AddressDetailsList:AddressDetails[]=[];
 
  getAddressDetailsnew():Observable<AddressDetails[]>{
    return this.http.get<AddressDetails[]>(this.baseurl+"Address")
  }
  
  

 [HttpGet("Address")]

        public async Task<ActionResult<IEnumerable<Address>>> GetAddressDetails()
        {
            return  await _context.Addresses.ToListAsync();
          
        }

I've attached the code above. I've mentioned all the details there, while runing that code i'm not able to see the data only the header i'm able to see in the brower.

You need to initialise a variable locally in your component and use that to fill the template, not involving the service.

Your component:

@Component({
  selector: 'app-home-coming',
  templateUrl: './home-coming.component.html',
  styleUrls: ['./home-coming.component.css']
})
export class HomeComingComponent implements OnInit {

  listData: AddressDetails[];  

  constructor(public service:FormDetailsService) { }

  ngOnInit(): void {
    this.service.getAddressDetailsnew().subscribe((data: AddressDetails[]) => {
      this.listData = data;
    })
  }
}

The template

<tbody>
    <tr *ngFor="let addr of listData">
        <td>{{addr.AddressID}}</td>
        <td>{{addr.Country}}</td>
        <td>{{addr.State}}</td>
        <td>{{addr.City}}</td>
    </tr>
</tbody>

Everything was good in this, the problem lies in the naming convention, where Angular 14 is taking naming convention like this "userName" if the written value is "UserName" is this also. So changing the naming convention worked for me.

Above solution provided by Francesco was totally correct and after making change by following his code, I was able to get the solution.