File
Implements
Metadata
| selector |
app-dashboard |
| styleUrls |
dashboard.component.scss |
| templateUrl |
./dashboard.component.html |
Methods
|
Public closeAlert
|
closeAlert(alert: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| alert |
any
|
|
|
|
|
Public alerts
|
alerts: Array<any>
|
Type : Array<any>
|
|
|
|
Public sliders
|
sliders: Array<any>
|
Type : Array<any>
|
|
|
import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
animations: [routerTransition()]
})
export class DashboardComponent implements OnInit {
public alerts: Array<any> = [];
public sliders: Array<any> = [];
constructor() {
this.sliders.push({
imagePath: 'assets/images/VIRS-1.jpg',
label: 'Vocabulary in Reading Study',
text: 'Analyzing one word at a time.'
}, {
imagePath: 'assets/images/VIRS-2.jpg',
label: 'Statistics and Words',
text: 'Detailed information and data representation of the word lists.'
}, {
imagePath: 'assets/images/VIRS-3.jpg',
label: 'Word Lists',
text: 'Information about the word is only a click away. '
});
}
ngOnInit() {
window.scrollTo(0, 0);
}
public closeAlert(alert: any) {
const index: number = this.alerts.indexOf(alert);
this.alerts.splice(index, 1);
}
}
<div [@routerTransition]>
<div class="row">
<div class="col-md-12">
<ngb-carousel>
<ng-template ngbSlide *ngFor="let slider of sliders">
<img class="img-fluid mx-auto d-block" [src]="slider.imagePath" alt="Random first slide" width="100%">
<div class="carousel-caption">
<h3>{{slider.label}}</h3>
<p>{{slider.text}}</p>
<a class="btn btn-primary" [routerLink]="['/text']">Measure Readability</a>
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
<hr>
<!--Cards on main page - for more information look at shared/modules/stat component-->
<div class="row">
<div class="col-xl-3 col-lg-6 margin-div">
<a [routerLink]="['/text']">
<app-stat [bgClass]="'card-primary'" [icon]="'fa-keyboard-o'" [label]="'Upload Text'" [data]="'Type Your Text'" [url]="'/text'"> </app-stat>
</a>
</div>
<div class="col-xl-3 col-lg-6 margin-div">
<a [routerLink]="['/doc']">
<app-stat [bgClass]="'card-info'" [icon]="'fa-file-text'" [label]="'Upload Doc'" [data]="'Microsoft Word'" [url]="'/doc'"></app-stat>
</a>
</div>
<div class="col-xl-3 col-lg-6 margin-div">
<a [routerLink]="['/pdf']">
<app-stat [bgClass]="'card-success'" [icon]="'fa-file-pdf-o'" [label]="'Upload PDF'" [data]="'PDF'" [url]="'/pdf'"></app-stat>
</a>
</div>
<div class="col-xl-3 col-lg-6 margin-div">
<a [routerLink]="['/image']">
<app-stat [bgClass]="'card-danger'" [icon]="'fa-picture-o'" [label]="'Upload Image'" [data]="'JPEG, PNG'" [url]="'/image'"></app-stat>
</a>
</div>
</div>
</div>
Legend
Html element with directive