apt-maintenance-account/src/app/flats-residents/component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<h2>Link Flats-to-Residents</h2>
<div class="list-to-list">

		<label class="llabel">Flats</label>
		<select class="lselect" size="20" [(ngModel)]="lId">
			<option
				*ngFor="let lmodel of lstream | async"
				value={{lmodel.id}}
				(click)="onlSelect(lmodel)"
				title={{lmodel.remarks}}
				>{{lmodel.flat_number}}</option>
		</select>

		<label class="alabel">Attached Residents</label>
		<select class="aselect" size="20" multiple [(ngModel)]="aIds">
			<option
				*ngFor="let amodel of attachedStream | async"
				value={{amodel.id}}
				(click)="onaSelect()"
				title={{amodel.remarks}}
				>{{amodel.first_name}}-{{amodel.last_name}}</option>
		</select>
		<button
			class="dbutton"
			(click)="detach()"
			title="Detach Residents"
			[disabled]="!canDetach"
			[hidden]="!editAllowed"
			>>></button>

		<label class="dlabel">Available Residents</label>
		<select class="dselect" size="20" multiple [(ngModel)]="dIds">
			<option
				*ngFor="let dmodel of detachedStream | async"
				value={{dmodel.id}}
				(click)="ondSelect()"
				title={{dmodel.remarks}}
				>{{dmodel.first_name}}-{{dmodel.last_name}}</option>
		</select>
		<button
			class="abutton"
			(click)="attach()"
			title="Attach Residents"
			[disabled]="!canAttach"
			[hidden]="!editAllowed"
			><<</button>

		<button
			class="homeButton"
			(click)="goHome()"
			title="Return to Home page"
			><i class="fa fa-home" aria-hidden="true"></i> Home</button>
</div>