Please assist, I just started learning angular and I'm having issues with my routerLink page.When I click on the routerLink it takes me to the page but displays blankpage but when I open the developer tools the page displays. what could be the issue.
My menu template
<div class="container"
fxLayout="column"
fxLayoutGap="10px">
<div fxFlex>
<div>
<h3>Menu</h3>
</div>
</div>
<div fxFlex>
<mat-grid-list cols="2" *ngIf="dishes" rowHeight="200px">
<mat-grid-tile *ngFor="let dish of dishes" [routerLink]= "['/dishdetail', dish.id]">
<img height="200px" src={{dish.image}} alt={{dish.image}}>
<mat-grid-tile-footer>
<h1> {{dish.name | uppercase}} </h1>
</mat-grid-tile-footer>
</mat-grid-tile>
</mat-grid-list>
</div>
Menu component.ts
import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
dishes: Dish[];
constructor(private dishService: DishService) { }
ngOnInit() {
this.dishes = this.dishService.getDishes();
}
}
Dishdetail component.ts where the id is to be fetched.
import { Component, OnInit, Input} from '@angular/core';
import { Params, ActivatedRoute} from '@angular/router';
import { Location } from '@angular/common';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
import { DISHES } from '../shared/dishes';
@Component({
selector: 'app-dishdetail',
templateUrl: './dishdetail.component.html',
styleUrls: ['./dishdetail.component.scss']
})
export class DishdetailComponent implements OnInit {
dish: Dish;
constructor(private dishService:DishService,
private route: ActivatedRoute,
private location: Location) { }
ngOnInit() {
const id = this.route.snapshot.params['id'];
this.dish = this.dishService.getDish(id);
}
previousPage(): void {
this.location.back();
}
}
Dishdetail template that is meant to display when clicked on routerLink on menu template.
<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="10px">
<div fxFlex>
<mat-grid-list colums="2" rowHeight="">
<div *ngIf="dish" fxFlex="40">
<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">
<mat-card-content>
<p> {{ dish.description }} </p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="previousPage()" >BACK</button>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex="40">
<mat-list *ngIf ="dish">
<h2>Comments</h2>
<mat-list-item *ngFor="let comment of dish.comments">
<p matLine><span> {{ comment.comment }} </span></p>
<p matLine><span> {{ comment.rating }} Stars</span></p>
<p matLine><span> -- {{ comment.author }} {{ comment.date | date }} </span></p>
</mat-list-item>
</mat-list>
</div>
</mat-grid-list>
</div>
My service file.ts
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { DISHES } from '../shared/dishes';
@Injectable({
providedIn: 'root'
})
export class DishService {
constructor() { }
getDishes():Dish[]{
return DISHES;
}
getDish(id:string):Dish{
return DISHES.filter(dish => dish.id === id)[0];
}
getFeaturedDish():Dish{
return DISHES.filter(dish => dish.featured)[0];
}
}
I want to display each dishes on a new page when click on in the menu template.
Thanks.
