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

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>List of Roles</h2>

<table summary="Role list">
	<caption>{{caption}}</caption>
	<thead>
		<tr>
			<th title="Role Name" scope="col">Role Name</th>
			<th title="Describe briefly on Role" scope="col">Description</th>
			<th title="Inherits from Roles" scope="col">Inherits</th>
			<th title="View/Edit/Delete">Actions
				<span>
						<button
							class="btn btn-link"
							(click)="add()"
							title="Add New Role"
							*ngIf="addAllowed"
						><i class="fa fa-plus" aria-hidden="true"></i></button>
				</span>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let model of models | async">
			<th scope="row">{{ model.name }}</th>
			<td>{{ model.description }}</td>
			<td>{{ model.inherits }}</td>
			<td>
				<button
					class="btn btn-link"
					(click)="onSelect(model)"
					title="View/Edit details"
					*ngIf="viewAllowed || editAllowed"
				><i class="fa fa-eye" aria-hidden="true"></i></button>
				<button
					class="btn btn-link"
					(click)="delete(model); $event.stopPropagation()"
					title="Delete record"
					*ngIf="deleteAllowed"
				><i class="fa fa-trash" aria-hidden="true"></i></button>
			</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th scope="row" colspan="3">Total Roles</th>
			<td colspan="1">{{totalRecords}}</td>
		</tr>
	</tfoot>
</table>