I have a problem, I am making a call to my API and it returns data.
I have implemented a component to show an error (it is called 404 but I will change it) and when I open my component 1 second before loading the data, the 404 page is seen.

How could I make the call wait until the call is completed?

Thank you

@if(salesData) {
    <div class="flex flex-col space-y-4 max-w-md mx-auto bg-white shadow-md overflow-hidden md:max-w-6xl">
    @for (i of pageRecords; track i.id) {

      <div (click)="btnClick(i)" class="rounded-lg border-double border-2 border-sky-500 md:flex">
        <div class="md:shrink-0">
          <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="{{ i.avatar }}"
          />
        </div>
        <div class="p-8 w-full">
          <div
            class="uppercase tracking-wide text-lg text-indigo-500 font-semibold"
          >
            {{ i.name }}
          </div>
          <a
            class="block mt-1 text-sm leading-tight font-medium text-black hover:underline"
            >{{ i.createdAt }}
          </a>
          <p class="mt-2 text-base text-slate-500">{{ i.description }}</p>
          <div class="inline-flex items-baseline space-x-4 space-y-16">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
            </svg> {{ i.bedrooms }} 
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
            </svg> {{ i.bathrooms }}
          </div>
        </div>
      </div>
    } 
  </div>

  @if (totalPages > 0) {

    <nav class="flex justify-center mt-5 mb-5" aria-label="Page navigation example">
      <ul class="flex items-center -space-x-px h-10 text-base">
        <li>
          <a href="#" class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
            <span class="sr-only">Previous</span>
            <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
          </a>
        </li>
        @for (x of numberOfPages; track x) {
          <li>
            <a (click)="goToPage(x)" id="{{ x }}" class="focus-visible:ring flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ x }}</a>
          </li>
        }
        <li>
          <a class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
            <span class="sr-only">Next</span>
            <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  }
} @else {
  <app-not-found />
}

getAds(n:string) {
   if (n.includes("sales")) {
      this.service.getAds().subscribe(response => {
        this.salesData = response;
        this.records = this.salesData.length;
        this.pageRecords = this.salesData.slice(0, this.recordsPerPage);
        this.totalPages = this.records / this.recordsPerPage;
  
        for (let i = 1; i <= this.totalPages; i++) {
          this.numberOfPages.push(i);
        }
      });
   } else {
      this.service.getRentsAds().subscribe(response => {
        this.salesData = response;
        this.records = this.salesData.length;
        this.pageRecords = this.salesData.slice(0, this.recordsPerPage);
        this.totalPages = this.records / this.recordsPerPage;
  
        for (let i = 1; i <= this.totalPages; i++) {
          this.numberOfPages.push(i);
        }
      });
   }
}

getRentsAds() {
    return this.http.get(`${this.apiUrl}/rents_ads`);
}

getAds() {
    return this.http.get(`${this.apiNest}/ads`);
}