Objective : populate the dashboard component by building the tenants component

note: Install font awesome package

Step 3: tenant.template.html
-----------------------------

construct the tenants table using bootstrap components

<table *ngIf="tenants?.length > 0 else #notenants class="table table-striped">

<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>email</th>
<th>balance</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{client.$key}}</td>
<td>{{client.firstName}} {{client.firstName}}</td>
<td>{{client.email}}</td>
<td>{{client.balance | currency:"USD":true}}</td>
<td><a class="btn btn-secondary btn-md"><i class="fa fa-arrow-circle-o-
right">Details</a></td>
</tr>
</tbody>
</table>

<ng-template #notenants>
<h3>There are no tenants in the system</h3>
</ng-template>

Step 2: tenant.component.ts selector : <app-clients></app-clients>

--------------------------------------------------------------------
get total balance of all the tenants

this.totalBalance: number;

getTotalBalance (){
this.totalBalance = this.clients.reduce(function(accumulator, currentValue){
return accumulator.balance + currentValue.balance;
},0);
}

Step 3: tenant.template.html
-----------------------------

construct the header using bootstrap and apply fontawesome styles

<div class='container'>
<div class="col-md-6">
<h5><i class="fa fa-users">Tenants</h5>
</div class="col-md-6">
<div class="col-md-6">
<h5 class="pull-right text-muted">total Balance{{totalBalance |
currency:"USD":true }}</h5>
</div class="col-md-6">
</div>