Struggling with learning angular, encountering new challenges when working with objects in different components. In two separate instances, try to implement two different mechanisms (microservice or service component serving an object directly). This specific case showcases the issue clearly. The code provided below works as expected, but the subsequent code fails to pass the card object to the HTML page. Despite debugging showing that the object is being populated, it appears undefined on the page.
import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { AppService } from '../app.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
/** Based on the screen size, switch from standard to one column per row */
//cards = [];
cardsForHandset = [];
cardsForWeb = [];
//isHandset: boolean = false;
cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map(({ matches }) => {
if (matches) {
return [
{ title: 'Card 1', cols: 2, rows: 1 },
{ title: 'Card 2', cols: 2, rows: 1 },
{ title: 'Card 3', cols: 2, rows: 1 },
{ title: 'Card 4', cols: 2, rows: 1 }
];
}
return [
{ title: 'Card 1', cols: 2, rows: 1 },
{ title: 'Card 2', cols: 1, rows: 1 },
{ title: 'Card 3', cols: 1, rows: 2 },
{ title: 'Card 4', cols: 1, rows: 1 }
];
})
);
constructor(private breakpointObserver: BreakpointObserver,
public appService: AppService,
) { }
}
HTML
<div class="grid-container">
<h1 class="mat-h1">Todays Deals</h1>
<mat-grid-list cols="2" rowHeight="350px">
<mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
<mat-card class="dashboard-card">
<mat-card-header>
<mat-card-title>
{{card.title}}
</mat-card-title>
</mat-card-header>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</div>
The non-working code snippet:
import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { AppService } from '../app.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
/** Based on the screen size, switch from standard to one column per row */
cards = [];
cardsForHandset = [];
cardsForWeb = [];
// rest of the code...
HTML - Same as above, but without using async keyword.
Service
import { Injectable } from '@angular/core';
// rest of the code...
Server Side Microservice
var express = require('express');
// rest of the code...
Errors Encountered: