html

<body>
  <p class="page-title">
    Lista zwierząt
  </p>
  <div class="material-table">
    <h3>Material search filter.</h3>
    <mat-form-field appearance="fill">
      <mat-label>Search countries by name</mat-label>
      <input matInput
             [(ngModel)]="searchTerm"
             placeholder="Search country by name" />
      <mat-icon class='search-icon' color="primary" matPrefix (click)="filterCountries(searchTerm)">search</mat-icon>
    </mat-form-field>

    <table *ngIf="dataSource"
           mat-table
           [dataSource]="dataSource"
           matSort
           (matSortChange)="onMatSortChange()"
           matSortDirection="asc"
           multiTemplateDataRows
           class="mat-elevation-z8">



      <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="name">
          Name
        </th>
        <td mat-cell *matCellDef="let element">{{ animal.animalName }}</td>
      </ng-container>


      <ng-container matColumnDef="Breed">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="Breed">Breed</th>
        <td mat-cell *matCellDef="let element">{{ animal.animalBreed }}</td>
      </ng-container>

      <ng-container matColumnDef="Species">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="Species">
          Species
        </th>
        <td mat-cell *matCellDef="let element">{{ animal.animalSpecies }}</td>
      </ng-container>

      <ng-container matColumnDef="Sex">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="Sex">
          Sex
        </th>
        <td mat-cell *matCellDef="let element">{{ animal.sex }}</td>
      </ng-container>

      <ng-container matColumnDef="Size">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="size">
          size
        </th>
        <td mat-cell *matCellDef="let element">{{ animal.size }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row
          *matRowDef="let row; columns: displayedColumns"
          class="example-detail-row"></tr>
    </table>
  </div>
</body>


<p>Ta komponenta demonstruje pobieranie danych z serwera.</p>
<p *ngIf="!Animal">
  <em>
    Ładowanie... Proszę odświeżyć, gdy backend ASP.NET
    zostanie uruchomiony.
  </em>
</p>
<table *ngIf="Animal">
  <thead>
    <tr>
      <th>Imię zwierzęcia</th>
      <th>Rasa zwierzęcia</th>
      <th>Gatunek zwierzęcia</th>
      <th>Płeć</th>
      <th>Rozmiar</th>
      <th>Data urodzenia</th>
      <th>Data założenia</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let animal of Animal">
      <td>{{ animal.animalName }}</td>
      <td>{{ animal.animalBreed }}</td>
      <td>{{ animal.animalSpecies }}</td>
      <td>{{ animal.sex }}</td>
      <td>{{ animal.size }}</td>
      <td>{{ animal.birthdayDate | date }}</td>
      <td>{{ animal.foundedDate | date }}</td>
    </tr>
  </tbody>
</table>
Editor is loading...