Angular display message if data is not found after input

Question

I want to display a message when Data is not found from our API after the user input its number and the button is clicked.

Here is my html

<ion-item>
      <ion-input placeholder="Number" [(ngModel)]="myNum"></ion-input>
      <ion-button (click)="onClick()">UPDATE</ion-button>
    </ion-item>
  </ion-list>



  <ng-container *ngIf="!error; else errorContent">

    <p *ngFor="let order of orders; let i=index;">
      <ion-item *ngIf="i==0">Number : <b>{{ order?.Number }}</b></ion-item>


    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">{{error}}</span>
    </p>
  </ng-template>
<ng-template ngif="blank">
    Document Number not Found
  </ng-template>
</ion-content>

Here.s my page.ts which is for displaying the Data and for when the button is clicked. I tried to add a property (this.blank) for null, 0 and length = 0 for API.

    ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe( //comment this if you will use Api Url
  //this.dataService.getRemoteData(this.myNum).subscribe( //comment this if you will use local data
    (data:any) => {
      // Takes data into in single Array and print 
      this.actualOrders = data.output.OrderTracking;
      this.orders = data.output.OrderTracking;
      this.blank = data.output.OrderTracking == null |data.output.OrderTracking === 0 || data.output.OrderTracking.length === 0;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

onClick () {

    this.dataService.getRemoteData(this.myNum).subscribe( //comment this if you will use local data
      (data:any) => {
        // Takes data into in single Array and print 
        this.orders = data.output.Result.OrderTracking;
        console.log("Remote Data:");
        console.log(data);

    this.blank = data.output.OrderTracking == null |data.output.OrderTrackin === 0 || data.output.OrderTracking.length === 0;
      },
      err => {
        // Set the error information to display in the template
        this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
      }
    );
  }

what is your problem? Are you receiving an error from your API? — bjdose
– bjdose, Commented May 20, 2020 at 6:25
I just want to display a message when a number is not existing/found from our API — Vista
– Vista, Commented May 20, 2020 at 6:38
The code you posted seems to work perfectly. I don't understand what your problem is. — bjdose
– bjdose, Commented May 20, 2020 at 6:41
Just like I said, I want to display an error message when the number is not existing/not found from our API — Vista
– Vista, Commented May 20, 2020 at 6:53
I suppose you mean when your API returns empty values, don't you? — bjdose
– bjdose, Commented May 20, 2020 at 6:54

Sergio · Accepted Answer · 2020-05-20 08:06:37Z

1

It seems that you made a typo with ngIf clause on the HTML.

<ng-template ngif="blank"> <!-- <<<-- *ngIf -->
    Document Number not Found
</ng-template>

answered May 20, 2020 at 8:06

Sergio

8291 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sergio Over a year ago

Is this your full HTM? There is a </ion-list> closing tag, but it is not open (line 5). And there is a </ion-content> closing tag, not open (last line). Maybe you should try with a simple <p *ngIf="blank"> instead of <ng-template *ngIf="blank">, just to check that it works.

Vista Over a year ago

Ahh Yes, its not my full html. tried it also with <p> tag, still doesn't work.

Sergio Over a year ago

Have you tried to test it under <ng-container *ngIf="!error; else errorContent"> (with a <p> I whould say, or similar), instead of in <ng-template> ?? Maybe the template tag is expecting some form of ID to be triggered to be shown.

Sergio Over a year ago

Ok, but it is safe to check if it is a framework error or not. You could try accessing params in an array style, instead of JSON approach, like

this.blank = data["output"]["OrderTracking"] == null | (data["output"]["OrderTrackin"] == 0 || data["output"]["OrderTracking"].length == 0);

. Sometimes Angular does not recognise JSON aproach if, like in this case, it is null.

Vista Over a year ago

Ohh i Think it works, under constructor I need to se this.blank = false; instead of true

|

Collectives™ on Stack Overflow

Angular display message if data is not found after input

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related