Just Take It

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `

  <div class=container-fluid style="margin:1%">
    <h1 style="color:#0056CC">
      {{title}}
    </h1>

    <div class=row>
      <div class=col-md-2 style="border: thin solid #0056CC; padding:1%; background-color:#00AADA">
        <h2 style="color:#FFFFFF">
          Food Types:
        </h2>

        <div style="margin-bottom:1%" data-ng-repeat="x in foodClass">
          <p style="float:left; color:#FFFFFF">{{x}}</p>
          <input type="checkbox" style="float:right">
        </div>
        <p>Name: {{hero[0].name}}</p>

        <div style="margin-bottom:1%">
          <input type="text" name="maxQuant" style="width:100%" placeholder="Max Quantity">
        </div>
      </div>

      <div class=col-md-10 style="border: thin solid #0056CC">
        <p>Test 2</p>
      </div>
    </div>
  </div>
  `
})
export class AppComponent {
  title:"Connect Food - Receive";
  hero = [{name: 'spawn'}];
  //foodClass = [{n:"Grain", val:true}, {n:"Meat", val:true}, {n:"Fruit", val:true}, {n:"Vegetable", val:true},  {n:"Drink", val:true}]
  foodClass = ['Grain', 'Meat', 'Fruit', 'Vegetable', 'Drink'];
  foodOther:[{n:"Perishable", val:true}, {n:"Non-Perishable", val:true}];
}