Submodule 19.3: Angular Components

Add a Card Component

Update the menu.component.html template to display the details of a selected dish using the Bootstrap Card component as follows:

View source:

Note the syntax, *ngif, which is the structural directive in Angular. 

We add in a *ngIf with the dish here in the row.
By applying an *ngIf="dish" to the div, we specify that if the selected dish is currently null, we don't add this div to the page.
If it is not, then this div will be added to the page and we'll display the columns elements with the content.