src/app/components/error/error.component.ts
| selector | app-error |
| styleUrls | ./error.component.scss |
| templateUrl | ./error.component.html |
Inputs |
| error | |
Type : Error
|
|
import { Component, Input } from '@angular/core';
import { Error } from '../../models/response.model';
@Component({
selector: 'app-error',
templateUrl: './error.component.html',
styleUrls: ['./error.component.scss'],
})
export class ErrorComponent {
@Input() error!: Error;
}
<div class="h-100 w-100 card px-5">
<div class="h-100 mx-5 error-container">
<div class="row w-100 h-100">
<div class="col-xl-4 col-md-6 col-sm-12 d-flex justify-content-center mr-5">
<img src="../../../assets/error.svg" alt="" class="w-100" />
</div>
<div class="col-xl-6 col-md-6 col-sm-12 d-flex ml-5 flex-column h-100 justify-content-center text-start">
<div class="h1 pt-2">Error!</div>
<div class="lead pt-3 lh">
<span
>The visualization could not be rendered due to some errors. Below mentioned are a list of problems that
could’ve occurred.</span
>
</div>
<div>
<ul class="text-start lead pt-3 lh">
<img
*ngIf="error.hasGidError"
alt="Valid google sheet url example"
width="100%"
src="assets/urlScreen.png"
/>
<li *ngIf="error.hasGidError">
<strong>Please copy and use the sheet URL from the Address bar like from above example.</strong>
</li>
<li *ngIf="error.hasGidError">
<strong>Do not use the Share URL from Google Sheets (URLs ending with ?usp=sharing).</strong>
</li>
<li>
The data version that you selected is deprecated for the sheet. Click on this link to see the deprecated
sheets.
</li>
<li class="pt-1">The format of the data didn't match the format of the master tables.</li>
<li class="pt-1">Network issues.</li>
</ul>
<p class="lead pt-3 lh">
To report this issue, please reach out to us,
<a class="contact-us-link">here</a>.
</p>
</div>
<div>
<code>{{ error.msg }}</code>
</div>
</div>
</div>
</div>
</div>
<!-- {{error.msg}} -->
./error.component.scss
.lh {
line-height: 1.5625rem;
}
.error-container {
display: flex;
align-items: center;
justify-content: center;
}
.contact-us-link {
color: rgb(64, 132, 201);
}