如何在角度6和vmware-clarity中的UI中显示错误消息

Question

Hi I am new to angular and Clarity, How can I show error message,http errors and other errors, in the UI using angular 6 and Clarity. below is a little code snippet from one of my component where you can see (err: any) => console.log(err), I want to show error message in the UI using Clarity Standard alert and App level alert, instead of consoling it. Please let me know how can I achieve this.Thanks in advance.

ngOnInit() {
 this.dataStorageService.getLocations()
  .subscribe(res => {
   for (let i = 0; i < res.Locations.length; i++) {
    const quoteReplaceData = res.Locations[i].replace(/'/g, '"');
     this.locationList.push(JSON.parse(quoteReplaceData));
   }
  }, (err: any) => console.log(err),
 () => console.log('All done getting incidents'));

Answer 1

//In your typescript file, define a variable
error: any;

ngOnInit() {
 this.dataStorageService.getLocations()
  .subscribe(res => {
   for (let i = 0; i < res.Locations.length; i++) {
    const quoteReplaceData = res.Locations[i].replace(/'/g, '"');
     this.locationList.push(JSON.parse(quoteReplaceData));
   }
  }, (err: any) => this.error = err,
 () => console.log('All done getting incidents'));

and in your view:

<div class="alert alert-danger" *ngIf="error">
    <div class="alert-items">
        <div class="alert-item static">
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
            </div>
            <span class="alert-text">
                {{error}}
            </span>
        </div>
    </div>
</div>