apt-maintenance-account/src/app/flats/list-n-detail.component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>List of Flats</h2>

<table summary="Flat list">
	<caption>{{caption}}</caption>
	<thead>
		<tr>
			<th title="Block Number" scope="col">Block No.</th>
			<th title="Flat Number" scope="col">Flat No.</th>
			<th title="Delete" scope="col">{{deleteAllowed?'Actions':''}}</th>
		</tr>
	</thead>
	<tbody>
		<tr [hidden]="!addAllowed">
			<td>
				<input
					type="text"
					required
					[(ngModel)]="model.block_number"
					placeholder="<new block number here>"
					#blockNumber="ngModel" />
			</td>
			<td>
				<input
					type="text"
					required
					[(ngModel)]="model.flat_number"
					placeholder="<new flat number here>"
					#flatNumber="ngModel" />
			</td>
			<td>
				<button
					class="btn btn-link"
					(click)="save()"
					title="Add record"
					[disabled]="!(model.block_number && model.flat_number)"
					><i class="fa fa-plus" aria-hidden="true"></i></button>
			</td>
		</tr>
		<tr *ngFor="let model of models | async">
			<th scope="row">{{ model.block_number }}</th>
			<td>{{ model.flat_number}}</td>
			<td>
				<button
					class="delete1 btn btn-link"
					(click)="delete(model); $event.stopPropagation()"
					title="Delete record"
					*ngIf="authzn.allowsDelete(model.owner_id)"
				><i class="fa fa-trash" aria-hidden="true"></i></button>
			</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th scope="row" colspan="2">Total Flats</th>
			<td colspan="1">{{totalRecords}}</td>
		</tr>
	</tfoot>
</table>