source: Farmatiko/ClientApp/src/app/admin/admin.component.html@ de18858

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
      <div class="container">
        <a class="navbar-brand" [routerLink]="['/']"><img src="../../assets/logo.png"></a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target=".navbar-collapse"
                aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
          <ul class="navbar-nav flex-grow">
            <li>Administration panel</li>
          </ul>
        </div>
      </div>
    </nav>
</header>
<mat-tab-group mat-stretch-tabs>
      <mat-tab label="Claiming requests"> 
        <div class="wrapper">
          <div>
            <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
              <thead>
                <tr>
                  <th>Account</th>
                  <th>Pharmacy</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let head of heads">
                  <td>{{head.Name}} | {{head.Email}}</td>
                  <td>{{head.Pharmacy[0].name}}</td>
                  <td><a (click)="Approve()">Approve</a> | <a (click)="Reject()">Reject</a></td>
                </tr>
              </tbody>
            </table>
        </div>
        </div>
      </mat-tab>
      <mat-tab label="Manage accounts">
        <div class="wrapper">
          <div>
            <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
              <thead>
                <tr>
                  <th>Account</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let head of heads">
                  <td>{{head.Name}} | {{head.Email}}</td>
                  <td><a (click)="Del(head)">Delete</a> | <a (click)="ChangeDialog(head)">Change</a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </mat-tab>
        <mat-tab label="Create new account">
          <div class="createform">
          <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input matInput [(ngModel)]="head.Name">
          </mat-form-field><br>
          <mat-form-field appearance="fill">
            <mat-label>Email</mat-label>
            <input matInput [(ngModel)]="head.Email">
          </mat-form-field><br>
          <mat-form-field appearance="fill">
            <mat-label>Password</mat-label>
            <input matInput [(ngModel)]="head.Passwd">
          </mat-form-field><br>
            <button onclick="createHead()" mat-raised-button color="primary">Create</button>
          </div>
        </mat-tab>
</mat-tab-group>

<div class="status">{{status}}</div>