Angular 4: error while showing dynamic page title sent by Laravel 5.5

I have the following code in Laravel 5.5:

public function index()
{
  $products = Product::all();
  return response()->json(['data' => $products, 'page_title' => 'Demo Products']);
}

In product.components.ts within the Angular 4, I wrote the following:

import {Title} from "@angular/platform-browser";
constructor(private productService: ProductService, private title: Title) {  }
ngOnInit() {

    this.productService.getProducts()
      .subscribe(data => {
        this.products = data.data;
        this.title.setTitle(data.page_title);
      }, (err: HttpErrorResponse) => {

But, during the compilation, it shows me the following error:

ERROR in src/app/product/product.component.ts(27,30): error TS2339: Property 'data' does not exist on type 'Product[]'. src/app/product/product.component.ts(28,34): error TS2339: Property 'page_title' does not exist on type 'Product[]'.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2IXMoAY
via IFTTT