treetrail-frontend/src/app/plant-detail/plant-detail.component.html

<div class='container' *ngIf="plant">
   <h1>{{ plant.english || plant.name }}</h1>
      <div class="row row1">
         <table>
            <tr *ngIf="plant.english">
               <th>English name</th>
               <td [innerText]="plant.english"></td>
            </tr>
            <tr *ngIf="plant.name">
               <th>Scientific name</th>
               <td [innerText]="plant.name"></td>
            </tr>
            <tr *ngIf="plant.spiritual">
               <th>Spiritual name</th>
               <td [innerText]="plant.spiritual"></td>
            </tr>
            <tr>
               <th>Description</th>
               <td [innerText]="plant.description"></td>
            </tr>
            <tr>
               <th>Family</th>
               <td [innerText]="plant.family"></td>
            </tr>
            <tr>
               <th>Type</th>
               <td [innerText]="plant.type"></td>
            </tr>
            <tr>
               <th>Woody</th>
               <td [innerText]="plant.woody?'Yes':'No'"></td>
            </tr>
            <tr>
               <th>Latex</th>
               <td [innerText]="plant.latex"></td>
            </tr>
            <tr>
               <th>Thorny</th>
               <td [innerText]="plant.thorny"></td>
            </tr>
         </table>
         <img class='image' [src]="imgUrl" class='img'>
      </div>
      <div class="row">
         <div>
            <div class="title">Leaf</div>
            <table>
               <tr>
                  <th>Type</th>
                  <td [innerText]="plant.leaf_type"></td>
               </tr>
               <tr>
                  <th>Arrangement</th>
                  <td [innerText]="plant.leaf_arrangement"></td>
               </tr>
               <tr>
                  <th>Aroma</th>
                  <td [innerText]="plant.leaf_aroma?'Yes':'No'"></td>
               </tr>
               <tr>
                  <th>Length</th>
                  <td>{{ plant.leaf_length | number }} cm</td>
               </tr>
               <tr>
                  <th>Width</th>
                  <td>{{ plant.leaf_width | number }} cm</td>
               </tr>
            </table>
         </div>
         <div>
            <div class="title">Flower</div>
            <table>
               <tr>
                  <th>Color</th>
                  <td [innerText]="plant.flower_color"></td>
               </tr>
               <tr>
                  <th>Aroma</th>
                  <td [innerText]="plant.flower_aroma?'Yes':'No'"></td>
               </tr>
               <tr>
                  <th>Size</th>
                  <td>{{ plant.flower_size | number }} cm</td>
               </tr>
            </table>
         </div>
         <div>
            <div class="title">Fruit</div>
            <table>
               <tr>
                  <th>Color</th>
                  <td [innerText]="plant.fruit_color"></td>
               </tr>
               <tr>
                  <th>Size</th>
                  <td>{{ plant.fruit_size | number }} cm</td>
               </tr>
               <tr>
                  <th>Type</th>
                  <td [innerText]="plant.fruit_type"></td>
               </tr>
            </table>
         </div>
      </div>
      <mat-divider></mat-divider>
      <div class='trails' *ngIf="dataService.plant_trail[plant.id]">
         <h3>Visible from these trails:</h3>
         <div class="trails-container">
            <app-trail-list-item
               *ngFor="let trail of (dataService.plant_trail[plant.id]) | keyvalue"
               [trail]="trail.value"
               >
            </app-trail-list-item>
         </div>
      </div>
</div>