src/app/shared/modules/stat/stat.component.ts
| selector | app-stat |
| styleUrls | stat.component.scss |
| templateUrl | ./stat.component.html |
Methods |
Inputs |
Outputs |
constructor()
|
bgClass
|
Type: |
count
|
Type: |
data
|
Type: |
icon
|
Type: |
label
|
Type: |
url
|
Type: |
event
|
$event type: EventEmitter<any>
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-stat',
templateUrl: './stat.component.html',
styleUrls: ['./stat.component.scss']
})
export class StatComponent implements OnInit {
@Input() bgClass: string;
@Input() icon: string;
@Input() count: number;
@Input() label: string;
@Input() data: number;
@Input() url: string;
@Output() event: EventEmitter<any> = new EventEmitter();
constructor() { }
ngOnInit() {}
}
<div class="card card-inverse {{bgClass}}">
<div class="card-header">
<div class="row">
<div class="col col-xs-3">
<i class="fa {{icon}} fa-5x"></i>
</div>
<div class="col col-xs-9 text-right">
<div class="d-block huge">{{count}}</div>
<div class="d-block"><h4><b>{{label}}</b></h4></div>
</div>
</div>
</div>
<div class="card-footer">
<span class="float-left">{{data}}</span>
<a href={{url}} class="float-right card-inverse">
<span ><i class="fa fa-arrow-circle-right"></i></span>
</a>
</div>
</div>