<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert"> <strong>Error! </strong> {{ errorMessage }} <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="container"> <h1>Horse Owners List</h1> <form class="search-form" id="searchForm" (ngSubmit)="loadFilteredOwners()" #searchForm="ngForm"> <div class="row"> <div class="col"> <input type="text" class="form-control" name="name" [(ngModel)]="filters.name" placeholder="Name"> </div> <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button> <button type="button" onclick="document.getElementById('searchForm').reset();" class="btn btn-danger"><i class="fas fa-times"></i></button> </div> </form> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr *ngFor="let owner of owners; let id = index"> <td>{{ id + 1 }}</td> <td>{{ owner.name }}</td> <td> <a class="btn btn-success" href="owner/{{ owner.id }}/edit"><i class="fas fa-edit"></i></a> <button class="btn btn-danger"><i class="fas fa-trash"></i></button> </td> </tr> </tbody> </table> </div>