src/app/components/table/table.component.ts
| selector | app-table |
| styleUrls | ./table.component.scss |
| templateUrl | ./table.component.html |
Methods |
Inputs |
constructor()
|
| faceApiResponse | |
Type : any
|
|
|
The face api response object. |
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
/**
* The face api response object.
* @param {any} faceApiResponse - the face api response object.
*/
@Input() faceApiResponse: any;
constructor() { }
ngOnInit(): void {
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="card bg-dark shadow-2-strong">
<div class="card-body">
<div class="table-responsive">
<table class="table table-dark table-borderless mb-0">
<thead>
<tr>
<th scope="col">ATTRIBUTES</th>
<th scope="col">VALUES</th>
</tr>
</thead>
<tbody>
<tr>
<th>Smiling</th>
<td>
{{ faceApiResponse[0]?.faceAttributes?.smile | percent }}
</td>
</tr>
<tr>
<th>Gender</th>
<td>{{ faceApiResponse[0]?.faceAttributes?.gender }}</td>
</tr>
<tr>
<th>Age</th>
<td>{{ faceApiResponse[0]?.faceAttributes?.age }}</td>
</tr>
<tr>
<th>Moustache</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.facialHair?.moustache
| percent
}}
</td>
</tr>
<tr>
<th>Beard</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.facialHair?.beard
| percent
}}
</td>
</tr>
<tr>
<th>Sideburns</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.facialHair?.sideburns
| percent
}}
</td>
</tr>
<tr>
<th>Glasses</th>
<td>{{ faceApiResponse[0]?.faceAttributes?.glasses }}</td>
</tr>
<tr>
<th>Anger</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.anger
| percent
}}
</td>
</tr>
<tr>
<th>Contempt</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.contempt
| percent
}}
</td>
</tr>
<tr>
<th>Disgust</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.disgust
| percent
}}
</td>
</tr>
<tr>
<th>Fear</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.fear
| percent
}}
</td>
</tr>
<tr>
<th>Happiness</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.happiness
| percent
}}
</td>
</tr>
<tr>
<th>Neutral</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.neutral
| percent
}}
</td>
</tr>
<tr>
<th>Sadness</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.sadness
| percent
}}
</td>
</tr>
<tr>
<th>Surprise</th>
<td>
{{
faceApiResponse[0]?.faceAttributes?.emotion?.surprise
| percent
}}
</td>
</tr>
<tr>
<th>EyeMakeup</th>
<td>
{{ faceApiResponse[0]?.faceAttributes?.makeup?.eyeMakeup }}
</td>
</tr>
<tr>
<th>LipMakeup</th>
<td>
{{ faceApiResponse[0]?.faceAttributes?.makeup?.lipMakeup }}
</td>
</tr>
<tr>
<th>Bald</th>
<td>
{{ faceApiResponse[0]?.faceAttributes?.hair?.bald | percent }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
./table.component.scss
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
html,
body,
.intro {
height: 100%;
width: 40%;
}
thead {
margin-bottom: 10px;
border-bottom: #fff solid 1px;
}
table td,
table th {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
thead th,
tbody th {
color: #fff;
}
tbody td {
font-weight: 500;
color: rgba(255, 255, 255, .65);
}
.card {
border-radius: .5rem;
}
.container {
margin-top: 50px
}