Passing page title from Laravel 5.5 to Angular 4 - angularjs

Question

In my laravel controller I wrote:
public function index()
{
$products = Product::all(); // get all products
$products['page_title'] = 'Demo Products'; // page title
return response()->json($products);
}
And in Angular 4, I wrote for this:
constructor(private productService: ProductService, private title: Title) { }
ngOnInit() {
//console.log('data');
this.productService.getProducts()
.subscribe(data => {
this.products = data;
this.title.setTitle(data.page_title);
},
And in the html under the angular I wrote the following:
<article class="col-md-4" *ngFor="let product of products">
<div class="font-weight-bold">{{product.product_name}}</div>
<p>{{product.description}}</p>
<p>{{product.rating}}</p>
</article>
In index.html, I wrote <title></title>
It shows the console error as below:
ProductComponent.html:7 ERROR Error: Error trying to diff '[object
Object]'. Only arrays and iterables are allowed
In postman, I see the following:
"18": {
"id": 19,
"product_name": "Adam Walsh",
"description": "Rabbit coming to look for her, and the small ones choked and had just upset the week before. 'Oh, I BEG your pardon!' cried Alice in a shrill, loud voice, and see after some executions I have to ask.",
"rating": 0,
"price": 59.2,
"created_at": "2018-03-22 11:04:39",
"updated_at": "2018-03-22 11:04:39"
},
"19": {
"id": 20,
"product_name": "Marilyne Kulas II",
"description": "I want to stay in here any longer!' She waited for a minute or two sobs choked his voice. 'Same as if his heart would break. She pitied him deeply. 'What is it?' he said, turning to Alice an.",
"rating": 5,
"price": 13.5,
"created_at": "2018-03-22 11:04:39",
"updated_at": "2018-03-22 11:04:39"
},
"page_title": "Demo Products"
}

Answer 1

The error is sent because *ngFor requires an array to iterate.
Assigning $products['page_title'] as if $products was an associative array is wrong. $products is a Illuminate\Database\Eloquent\Collection. When sending it as json, Laravel parse it as an indexed array. But i guess you broke it by assigning 'page_title' this way.
Try to print_r($products) before sendind it, to check that.
I'd rather do something like this :
return response()->json(['data' => $products, 'page_title' => 'Demo Products']);
And in angular :
this.productService.getProducts()
.subscribe(response => {
this.products = response.data;
this.title.setTitle(response.page_title);
},