I find it incredibly frustrating that the code snippet below is not working as intended. This particular piece of code was directly copied and pasted from an online Angular course I am currently taking. The objective of this code is to display a card view with accompanying comments when a picture is clicked, but unfortunately nothing happens when the picture is clicked. It's quite perplexing, especially considering there are no apparent errors present.
As you can observe in the code, there exists a "shared" folder where all the required information is stored. If necessary, I can provide the contents of this folder for further analysis.
menu.component.ts:
import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish'
import { DISHES } from '../shared/dishes'
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
dishes: Dish[] = DISHES;
selectedDish : Dish;
onSelect( dish : Dish ) {
this.selectedDish = dish;
}
constructor() { }
ngOnInit() {
}
}
dishdetail.component.ts:
import { Component, OnInit, Input } from '@angular/core';
import { Dish } from '../shared/dish'
@Component({
selector: 'app-dishdetail',
templateUrl: './dishdetail.component.html',
styleUrls: ['./dishdetail.component.scss']
})
export class DishDetailComponent implements OnInit {
@Input()
dish: Dish
constructor() { }
ngOnInit() {
}
}
dishdetail.component.html:
<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div fxFlex="40" *ngIf="dish">
<mat-card>
<mat-card-header>
<mat-card-title>
<h3>{{dish.name | uppercase}}</h3>
</mat-card-title>
</mat-card-header>
<img mat-card-image src={{dish.image}} alt={{dish.name}}>
<mat-card-content>
<p>{{dish.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex="40" *ngIf="dish">
<mat-list>
<h3>Comments</h3>
<mat-list-item *ngFor="let comment of dish.comments">
<style> .mat-list-item {
min-height: 80px;
}</style>
<p matline>
<span>{{comment.comment}}<br></span>
<span>{{comment.rating}} Stars<br></span>
<span>-- {{comment.author}} {{comment.date | date}}</span>
</p>
</mat-list-item>
</mat-list>
</div>
</div>
menu.component.html:
<div class="container"
fxLayout="column"
fxLayoutGap="10px">
<div fxFlex>
<div>
<h3>Menu</h3>
<hr>
</div>
</div>
<div fxFlex>
<mat-grid-list cols="2" rowHeight="200px">
<mat-grid-tile *ngFor="let dish of dishes" (click) = "onSelect(dish)">
<img height="200px" src={{dish.image}} alt={{dish.name}}>
<mat-grid-tile-footer>
<h1>{{dish.name | uppercase}}</h1>
</mat-grid-tile-footer>
</mat-grid-tile>
</mat-grid-list>
</div>
<app-dishdetail [dish] = "SelectedDish"></app-dishdetail>
</div>