src/app/components/error-screen/error-screen.component.ts
| selector | app-error-screen |
| styleUrls | ./error-screen.component.css |
| templateUrl | ./error-screen.component.html |
Properties |
|
Methods |
constructor(store: ErrorStore, router: Router)
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| ok |
ok()
|
|
Returns :
void
|
| Public store |
Type : ErrorStore
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ErrorStore } from '../../providers/stores/error.store';
@Component({
selector: 'app-error-screen',
templateUrl: './error-screen.component.html',
styleUrls: ['./error-screen.component.css'],
})
export class ErrorScreenComponent implements OnInit {
constructor(public store: ErrorStore, private router: Router) {}
ngOnInit() {
if (this.store.errors.length === 0) {
this.router.navigate(['/start']);
}
}
ok() {
this.store.reset();
this.router.navigate(['/start']);
}
}
<div class="scroller">
<div id="errorScreen" class="empty-page-ctn">
<i class="material-icons status-negative">error_outline</i>
<h3 class="status-header status-negative">Encountered Errors:</h3>
<div class="page-description" *ngFor="let error of store.errors">
<p class="error-title">{{ error.title }}</p>
<p class="error-message">{{ error.message }}</p>
</div>
<div>
<button id="okButton" (click)="ok()" type="button" class="action-button">
<p class="button-inside">Ok</p>
</button>
</div>
</div>
</div>
./error-screen.component.css
#errorScreen i {
margin-bottom: 0px;
}
h3 {
margin: -10px 0px 0px 0px;
}
#errorScreen .status-icon {
border: 3px solid #e7212b;
}
.empty-page-ctn i {
font-size: 70px;
}
.error-title {
margin-top: 15px;
font-size: 16px;
color: #474747;
font-weight: bold;
}
.error-message {
font-size: 14px;
color: #707173;
margin: 0px top;
}
.empty-page-ctn p {
width: auto;
}
.empty-page-ctn button {
max-width: 200px;
}
#errorScreen .action-button {
margin-top: 0px;
}
.page-description {
margin-top: 10px;
max-width: 600px;
}