apt-maintenance-account/src/app/users/list.component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>User List</h2>

<table summary="Users">
	<caption>{{caption}}</caption>
	<thead>
		<tr>
			<th title="User Name" scope="col">User Name</th>
			<th title="First Name" scope="col">First Name</th>
			<th title="Email ID" scope="col">Email</th>
			<th title="View/Edit/Delete">Actions
				<span *ngIf="addAllowed">
						<button class="btn btn-link" (click)="add()" title="Add User"><i class="fa fa-plus" aria-hidden="true"></i></button>
				</span>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let model of models | async">
			<th>{{ model.name }}</th>
			<td>{{ model.first_name }}</td>
			<td>{{ model.email }}</td>
			<td>
				<button
					class="view1 btn btn-link"
					(click)="onSelect(model)"
					title="View details"
					*ngIf="authzn.allowsView(model.id)"
				><i class="fa fa-eye" aria-hidden="true"></i></button>
				<button
					class="delete1 btn btn-link"
					(click)="delete(model); $event.stopPropagation()"
					title="Delete record"
					*ngIf="authzn.allowsDelete(model.id)"
				><i class="fa fa-trash" aria-hidden="true"></i></button>
			</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th scope="row" colspan="3">Total Users</th>
			<td colspan="1">{{totalRecords}}</td>
		</tr>
	</tfoot>
</table>