product.component.ts

products: Product[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.handleProductList();
  }

  handleProductList() {
    this.productService.getProductList().subscribe((data: any) => {
      this.products = data;
      console.log(this.products);
    });
    console.log(this.products);
  }

product.service.ts

private baseUrl: string = 'http://localhost:8080/products';

  constructor(private httpClient: HttpClient) {}

  getProductList(): Observable<Product[]> {
    return this.httpClient
      .get<GetResponseProduct>(this.baseUrl)
      .pipe(map((response) => response._embedded.products));
  }

interface GetResponseProduct {
  _embedded: {
    products: Product[];
  };
}

data is consist of array and I am assigning it to products. when I try to access it from outside the subscribe the products is empty but inside products consist of data.

How can I assign data to products?