<style>
    input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
    input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
</style>

<div class="row m-2">
  <div class="col-6">
    <form class="m-2" novalidate (ngSubmit)="submitForm()">
        <div class="form-group">
            <label>Produkt</label>
            <input class="form-control" name="name" [(ngModel)]="newProduct.name" />
        </div>
        <div class="form-group">
            <label>Kategoria</label>
            <input class="form-control" name="category"
                [(ngModel)]="newProduct.category" />
        </div>
        <div class="form-group">
            <label>Cena</label>
           <input class="form-control" name="price" [(ngModel)]="newProduct.price" />
        </div>
        <button class="btn btn-primary" type="submit">Dodaj</button>
    </form>
  </div>

  <div class="col-6">
    <div class="form-group bg-info text-white p-2">
        <label>Produkt:</label>
        <input class="bg-primary text-white" [(paModel)]="newProduct.name" #paModel="paModel" />
        <div class="bg-primary text-white">Kierunek: {{paModel.direction}}</div>
    </div>

    <table class="table table-sm table-bordered table-striped">
        <tr><th></th><th>Produkt</th><th>Kategoria</th><th>Cena</th></tr>
        <tr *ngFor="let item of getProducts(); let i = index"
                [pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'"
                [pa-product]="item" (pa-category)="newProduct.category=$event">
            <td>{{i + 1}}</td>
            <td>{{item.name}}</td>
            <td [pa-attr]="item.category == 'Piłka nożna' ? 'bg-info' : null">
                {{item.category}}
            </td>
            <td [pa-attr]="'bg-info'">{{item.price}}</td>
        </tr>
    </table>
</div>
