Angular 6 for Enterprise-Ready Web Applications

Implementing Layout Scaffolding

We need to start by implementing the rough scaffolding.

Consider the current state of the template:

   src/app/current-weather/current-weather.component.html 1 <div *ngIf="current"> 2  <div> 3    <span>{{current.city}}, {{current.country}}</span> 4    <span>{{current.date | date:'fullDate'}}</span> 5  </div> 6  <div> 7    <img [src]='current.image'> 8    <span>{{current.temperature | number:'1.0-0'}}℉</span> 9  </div>10  <div>11    {{current.description}}12  </div>13 </div>

Let's go through the file step by step and update it:

1. Update <span> elements to <div> on lines 3, 4, and 8
2. Wrap the <img> element with a <div>
3. Add the fxLayout="row" property to the <div> element that has multiple child elements on lines 2 and 6
4. The City and ...