im using fakeapi store to fetch products and loop on them to show in a component im using a service to do that and it goes as follows

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root',
})
export class ProductsService {
  eleProducts: any[];
  spinnerElec: boolean;
  constructor(private http: HttpClient) {
    this.spinnerElec = true;
    this.eleProducts = [];
  }
  getElectronics() {
    this.spinnerElec = true;
    this.http
      .get(environment.baseUrl + '/category/electronics')
      .subscribe((res: any) => {
        this.eleProducts = res;
        this.spinnerElec = false;
      });
  }

```

then in the electronics-component.ts

```
export class ElectronicsComponent implements OnInit {
  Products: any[];
  spinner: boolean;

  constructor(public service: ProductsService) {
    this.Products = [];
    this.spinner = true;
  }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.spinner = this.service.spinnerElec;
    this.service.getElectronics();
    this.Products = this.service.eleProducts;
  }

```

and to display data in electronics-component.html

```
<div class="row gap-3 justify-content-center" *ngIf="!spinner">
    <div
      class="card col-lg-4 col-md-6 col-sm-12 bg-warning"
      style="width: 18rem"
      *ngFor="let product of Products"
    >
      <app-product
        [elecCart]="service.elecCart"
        [Product]="product"
        (target)="addToCart($event)"
      ></app-product>
    </div>
  </div>
  <div
    class="spin d-flex justify-content-center align-items-center w-100"
    *ngIf="spinner"
  >
    <app-spinner></app-spinner>
  </div>

```

im using ngif on the spinner to clear it from the dom and show data once it fetched sucessfuly the problem is that i must open the componet then go to another component then come back to it again to show the data otherwise the data wont show... thanks in advance