Show "No result" during search . How it can avoid?

Friends,

I tried to search for two fields and show the result on same page , but during search “No result” message can see in background. All data come fine from provider.

My template is

my template is like

<ion-content padding>
    <h4 style="color:#F00" *ngIf="!connectivityFlag">You are offline, please be online to know building status </h4>
    <form [formGroup]="formgroup" >    
        <ion-item>
            <ion-label stacked>Inward No</ion-label>
            <ion-input type="text" formControlName="inwardno" [(ngModel)]="data.inwardno" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Year</ion-label>
            <ion-input type="text" formControlName="year" [(ngModel)]="data.year" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <button  ion-button block round [disabled]="!inwardno.valid||!year.valid" (click)="getFileStatus()">Search</button>

    </form>  

    <div style="text-align:center" *ngIf="searchFlag && !dataFlag">
        <br /><br />
        <b>No search results , please try again</b>
    </div>
   	<br/>
	<br/>
	<div class="box-header" *ngIf="searchFlag && dataFlag">                 
	                                        <div class="box-header">
	                                           <h3 class="box-title">File Status Details</h3>
                                            </div>
											<div class="box-body no-padding">
                                                <table class="table table-striped"> 
                                                    <tbody>
                                                        
                                                        <tr> 
                                                            <td>Date Received</td>
                                                            <td>{{Date}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Inward No</td>
                                                            <td>{{FileNo}}</td>
                                                        </tr>
														<tr> 
                                                            <td>Local Body Name <br/> </td>
                                                            <td>{{lbname}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Address</td>
                                                            <td>{{ApplicantAddress}}</td>
                                                        </tr> 
                                                        <tr> 
                                                            <td>Locality</td>
                                                            <td>{{ApplicantLocality}}</td>
                                                        </tr> 
                                                                     
                                                        <tr> 
                                                            <td>File Status</td>
                                                            <td>{{FileStatus}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>Seat</td>
                                                            <td>{{seat}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>File ID</td>
                                                            <td>{{FileID}}</td>
                                                        </tr> 
                                                                                                                                                   

My contrller function is

getFileStatus ()
  {
    //alert(this.data.efileno);
    var inwardno = this.data.inwardno;
    var year = this.data.year;
    var lbid = this.lb;
    //alert("lbid:"+lbid+"yr:"+year+"inwno:"+inwardno);
    //this.dataFlag = false;
    this.searchFlag = true;
    if(this.global1.getnetwork()) 
    {
      let loader = this.loadingController.create({
        content: "Loading Result ... "
      });  
      loader.present(); 
      this.statusProvider.getFileStatus(lbid,inwardno,year)
      .then(data => {
       //alert(JSON.stringify(data));

        if(data) 
        {
          //alert("inside IF");
          this.dataFlag = true;
          this.LBID =  data[0].intLBID;
          this.ApplicantAddress = data[0].Address;
          this.ApplicantLocality = data[0].Locality;
          this.Date = data[0].dtDateofReceipt;
          this.FileStatus = data[0].StatusEng;
          this.FileID = data[0].intFileID;
          this.seat = data[0].chvSeat;
          this.FileNo = data[0].chvFileNo;
          loader.dismiss();
        } else {
          this.dataFlag = false;
          this.searchFlag = true;
          loader.dismiss();
        } 
        loader.dismiss();
      });
      loader.dismiss();
      this.dataFlag = false;
      this.searchFlag = true;
    } else {
      //alert("You are offline, please be online to know building permit status");
      this.presentAlert();
    }

  }

Please help how it can make proper

Thanks

Before the search the searchFlag and dataFlag are false. After the successfull search both are true. But during the search searchFlag is true and dataFlag is false, so the condition in the ngIf is true and the information is shown.

<div style="text-align:center" *ngIf="searchFlag && (!dataFlag)">
    <br /><br />
    <b>No search results , please try again</b>
</div>

If I understood correctly, you see this information during the search, but not after. You don’t want to see it during the search (because it shouldn’t be shown at this time).

If that’s the case, this is just a simple case with conditionals, you should be able to solve it easily, don’t know why you PMed me twice to solve it.

Because it seems you want the searchFlag to be true even after the search is done, one way to solve it is just create a 3rd flag, like searchingFlag, and make it to be true only when you are searching:

this.searchingFlag = true;

this.myService().myMethod().then(result => {
	this.searchingFlag = false;
	return result;
}).catch(e => {
	this.searchingFlag = false;
	throw e;
});

Then you use it like:

<div style="text-align:center" *ngIf="searchFlag && (!searchingFlag) && (!dataFlag)">
    <br /><br />
    <b>No search results , please try again</b>
</div>

Or you could just make the searchFlag = true after the search is done.

Dear Lucas,
I did use 3 flags now. But

1.now condition is fine when there is data for search… It’s fine

  1. When there is no data , no Error message shown.

  2. If there is a result shown and search for subsequent no result old result is there…
    I have out of mind in this problem . Do you please advise

my current function is

 getFileStatus ()
  {
    //alert(this.data.efileno);
    var inwardno = this.data.inwardno;
    var year = this.data.year;
    var lbid = this.lb;
    //alert("lbid:"+lbid+"yr:"+year+"inwno:"+inwardno);
    //this.dataFlag = false;
    //this.searchFlag = true;
    if(this.global1.getnetwork()) 
    {
      let loader = this.loadingController.create({
        content: "Loading Result ... "
      });  
      loader.present(); 
      this.searchFlag = true;
      this.searchingFlag = true;
      this.statusProvider.getFileStatus(lbid,inwardno,year)
      .then(data => {
       //alert(JSON.stringify(data));
        this.searchingFlag = false;
        if(data) 
        {
          //alert("inside IF");
          this.dataFlag = true;
          this.LBID =  data[0].intLBID;
          this.ApplicantAddress = data[0].Address;
          this.ApplicantLocality = data[0].Locality;
          this.Date = data[0].dtDateofReceipt;
          this.FileStatus = data[0].StatusEng;
          this.FileID = data[0].intFileID;
          this.seat = data[0].chvSeat;
          this.FileNo = data[0].chvFileNo;
          loader.dismiss();
        } else {
          this.dataFlag = false;
          this.searchFlag = false;
          loader.dismiss();
        } 
        loader.dismiss();
      });
      loader.dismiss();
      //this.dataFlag = false;
      //this.searchFlag = true;
    } else {
      //alert("You are offline, please be online to know building permit status");
      this.dataFlag = false;
      this.searchFlag = false;
      this.presentAlert();
    }

  }

Template

<ion-content padding>
    <h4 style="color:#F00" *ngIf="!connectivityFlag">You are offline, please be online to know building status </h4>
    <form [formGroup]="formgroup" >    
        <ion-item>
            <ion-label stacked>Inward No</ion-label>
            <ion-input type="text" formControlName="inwardno" [(ngModel)]="data.inwardno" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Year</ion-label>
            <ion-input type="text" formControlName="year" [(ngModel)]="data.year" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <button  ion-button block round [disabled]="!inwardno.valid||!year.valid" (click)="getFileStatus()">Search</button>

    </form>  
    <div> flags {{searchFlag}} - {{searchingFlag}} - {{dataFlag}}</div>

    <div style="text-align:center" *ngIf="searchFlag && (!searchingFlag) && (!dataFlag)">
        <br /><br />
        <b>No search results , please try again</b>
    </div>
   	<br/>
	<br/>
	<div class="box-header" *ngIf="searchFlag && dataFlag">                 
	                                        <div class="box-header">
	                                           <h3 class="box-title">File Status Details</h3>
                                            </div>
											<div class="box-body no-padding">
                                                <table class="table table-striped"> 
                                                    <tbody>
                                                        
                                                        <tr> 
                                                            <td>Date Received</td>
                                                            <td>{{Date}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Inward No</td>
                                                            <td>{{FileNo}}</td>
                                                        </tr>
														<tr> 
                                                            <td>Local Body Name <br/> </td>
                                                            <td>{{lbname}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Address</td>
                                                            <td>{{ApplicantAddress}}</td>
                                                        </tr> 
                                                        <tr> 
                                                            <td>Locality</td>
                                                            <td>{{ApplicantLocality}}</td>
                                                        </tr> 
                                                                     
                                                        <tr> 
                                                            <td>File Status</td>
                                                            <td>{{FileStatus}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>Seat</td>
                                                            <td>{{seat}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>File ID</td>
                                                            <td>{{FileID}}</td>
                                                        </tr> 
                                                                                                                                                   

                                                    </tbody></table> 

Please advise

Thanks

Anes

About your topics:

[2] To show “No results” you need this.searchFlag = true, at least this was required in the ngIf you posted. You could change the logic if you want, just make the necessary adaptations. In your case:

if(data) 
{
  //...
} else {
  this.dataFlag = false;
  // remove this: this.searchFlag = false;
  loader.dismiss();
}

I advise that you try to figure out what are the values of the 3 flags before, during and after the search, and compare with the conditions in the ngIf. This could help you solve these kind of problems easily and after.

[3] I don’t understand what you are saying there, but I advise that you do what I said earlier (about the flags values and the conditions in the ngIf, both the one that show No Results and the one that show the data)

I see that you show the flags in the html, use that to see what happens in each stage and to know what to do next.

Hi Lucas,
I tried some cases , but fail in some way . My final function

getFileStatus ()
  {
    //alert(this.data.efileno);
    var inwardno = this.data.inwardno;
    var year = this.data.year;
    var lbid = this.lb;
    //alert("lbid:"+lbid+"yr:"+year+"inwno:"+inwardno);
    //this.dataFlag = false;
    //this.searchFlag = true;
    if(this.global1.getnetwork()) 
    {
      let loader = this.loadingController.create({
        content: "Loading Result ... "
      });  
      loader.present(); 
      this.searchFlag = true;
      this.searchingFlag = true;
      this.statusProvider.getFileStatus(lbid,inwardno,year)
      .then(data => {
       //alert(JSON.stringify(data));
        this.searchingFlag = false;
        if(data) 
        {
          //alert("inside IF");
         
          this.LBID =  data[0].intLBID;
          this.ApplicantAddress = data[0].Address;
          this.ApplicantLocality = data[0].Locality;
          this.Date = data[0].dtDateofReceipt;
          this.FileStatus = data[0].StatusEng;
          this.FileID = data[0].intFileID;
          this.seat = data[0].chvSeat;
          this.FileNo = data[0].chvFileNo;
          loader.dismiss();
          if(this.FileNo != null || this.FileNo != "" ) {
            this.dataFlag = true;
          } 
        } else {
          this.dataFlag = false;
          //this.searchFlag = false;
          loader.dismiss();
        } 
        loader.dismiss();
      });
      loader.dismiss();
      //this.dataFlag = false;
      //this.searchFlag = true;
    } else {
      //alert("You are offline, please be online to know building permit status");
      this.dataFlag = false;
      this.searchFlag = false;
      this.presentAlert();
    }

  }

Template

<ion-content padding>
    <h4 style="color:#F00" *ngIf="!connectivityFlag">You are offline, please be online to know building status </h4>
    <form [formGroup]="formgroup" >    
        <ion-item>
            <ion-label stacked>Inward No</ion-label>
            <ion-input type="text" formControlName="inwardno" [(ngModel)]="data.inwardno" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Year</ion-label>
            <ion-input type="text" formControlName="year" [(ngModel)]="data.year" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <button  ion-button block round [disabled]="!inwardno.valid||!year.valid" (click)="getFileStatus()">Search</button>

    </form>  
    <div> flags {{searchFlag}} - {{searchingFlag}} - {{dataFlag}}</div>

    <div style="text-align:center" *ngIf="searchFlag && (searchingFlag) && (!dataFlag)">
        <br /><br />
        <b>No search results , please try again</b>
    </div>
   	<br/>
	<br/>
	<div class="box-header" *ngIf="searchFlag && dataFlag">                 
	                                        <div class="box-header">
	                                           <h3 class="box-title">File Status Details</h3>
                                            </div>
											<div class="box-body no-padding">
                                                <table class="table table-striped"> 
                                                    <tbody>
                                                        
                                                        <tr> 
                                                            <td>Date Received</td>
                                                            <td>{{Date}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Inward No</td>
                                                            <td>{{FileNo}}</td>
                                                        </tr>
														<tr> 
                                                            <td>Local Body Name <br/> </td>
                                                            <td>{{lbname}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Address</td>
                                                            <td>{{ApplicantAddress}}</td>
                                                        </tr> 
                                                        <tr> 
                                                            <td>Locality</td>
                                                            <td>{{ApplicantLocality}}</td>
                                                        </tr> 
                                                                     
                                                        <tr> 
                                                            <td>File Status</td>
                                                            <td>{{FileStatus}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>Seat</td>
                                                            <td>{{seat}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>File ID</td>
                                                            <td>{{FileID}}</td>
                                                        </tr> 
                                                                                                                                                   

                                                    </tbody></table> 

I feel the solution is far away…

please advise

Anes

I tried some cases , but fail in some way

In which way? Please, be more specific!

What do you want to happen and what is happening?

Dear Lucas,
I tried code I specify on above post. My aim is

  1. When I search with 2 fields , if result get I need to show that result after a loading controller without showing the “No Search Result”

    before actual result.
  2. If first search value is there, and second search also fruitful must show a loading controller and show the corresponding value.

  3. If no Search result , must show “No Search Result”

  4. If after a “No search Result” if get a result it must replace with that result .

  5. I tried based on 3 flags but nothing perfect in atleast any one of 4 conditions. If you have a
    logic with code advise me…

    Thanks

    Anes

If you use:

*ngIf="searchFlag && (!searchingFlag) && (!dataFlag)"

in the box that show No result and use:

*ngIf="searchFlag && dataFlag"

in the one that show the results (like in your code above, except that there is !searchingFlag instead of searchingFlag, because you don’t want to show No result while the search is being done, but after), which of the 4 aims you posted before is not accomplished?

Dear Lucas,

I used template as

 <div style="text-align:center" *ngIf="searchFlag && (!searchingFlag) && (!dataFlag)">
        <br /><br />
        <b>No search results , please try again</b>
    </div>
   	<br/>
	<br/>
	<div class="box-header" *ngIf="searchFlag && dataFlag">                 
	                                        <div class="box-header">
	                                           <h3 class="box-title">File Status Details</h3>
                                            </div>
											<div class="box-body no-padding">
                                                <table class="table table-striped"> 
                                                    <tbody>
                                                        
                                                        <tr> 
                                                            <td>Date Received</td>
                                                            <td>{{Date}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Inward No</td>
                                                            <td>{{FileNo}}</td>
                                                        </tr>
														<tr> 
                                                            <td>Local Body Name <br/> </td>
                                                            <td>{{lbname}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Address</td>
                                                            <td>{{ApplicantAddress}}</td>
                                                        </tr> 
                                                        <tr> 
                                                            <td>Locality</td>
                                                            <td>{{ApplicantLocality}}</td>
                                                        </tr> 
                                                                     
                                                        <tr> 
                                                            <td>File Status</td>
                                                            <td>{{FileStatus}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>Seat</td>
                                                            <td>{{seat}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>File ID</td>
                                                            <td>{{FileID}}</td>
                                                        </tr> 
                                                                                                                                                   

                                                    </tbody></table> 

and controller

 getFileStatus ()
  {
    //alert(this.data.efileno);
    var inwardno = this.data.inwardno;
    var year = this.data.year;
    var lbid = this.lb;
    //alert("lbid:"+lbid+"yr:"+year+"inwno:"+inwardno);
    //this.dataFlag = false;
    //this.searchFlag = true;
    if(this.global1.getnetwork()) 
    {
      let loader = this.loadingController.create({
        content: "Loading Result ... "
      });  
      loader.present(); 
      this.searchFlag = true;
      this.searchingFlag = true;
      this.statusProvider.getFileStatus(lbid,inwardno,year)
      .then(data => {
       //alert(JSON.stringify(data));
        this.searchingFlag = false;
        if(data) 
        {
          //alert("inside IF");
         
          this.LBID =  data[0].intLBID;
          this.ApplicantAddress = data[0].Address;
          this.ApplicantLocality = data[0].Locality;
          this.Date = data[0].dtDateofReceipt;
          this.FileStatus = data[0].StatusEng;
          this.FileID = data[0].intFileID;
          this.seat = data[0].chvSeat;
          this.FileNo = data[0].chvFileNo;
          loader.dismiss();
          if(this.FileNo != null || this.FileNo != "" ) {
            this.dataFlag = true;
          } 
        } else {
          this.dataFlag = false;
          //this.searchFlag = false;
          loader.dismiss();
        } 
        loader.dismiss();
      });
      loader.dismiss();
      //this.dataFlag = false;
      //this.searchFlag = true;
    } else {
      //alert("You are offline, please be online to know building permit status");
      this.dataFlag = false;
      this.searchFlag = false;
      this.presentAlert();
    }

  }

  1. Will not work, So 4 obviously not working…

2 is working fine

1 also working fine…

Please advise

Thanks

Anes

It should show No result if data is null or undefined. Try to log it to see what happens:

//alert(JSON.stringify(data));
this.searchingFlag = false;
console.log('data', data);

Also, what is shown in your HTML when no data is returned (in the case No result should be shown) when you put the following:

<div> flags {{searchFlag}} - {{searchingFlag}} - {{dataFlag}}</div>

(It should show flags true - false - false, otherwise you should see why this isn’t happening)

In above console I got reply from Error part of Provider as

oops error in getting inward file status

Not reach the console data logging part …

My provider function is

getFileStatus(lbid,inwardno,year) {
    var obj = {lbid: lbid, inwardno: inwardno, year: year} ;
    var myData = JSON.stringify(obj);
    if(this.data)
    {
      return Promise.resolve(this.data);
    } else {
      return new Promise
       (
         resolve => {
                      this.http.post('<testURL>/mobservice/index.php/soochika/',myData,{ headers: new HttpHeaders()
                      , responseType: 'json'})
                      .map(res => res)
                      .subscribe
                                (res => {
                                  resolve(res);
                                },
                                err => {console.log("oops error in getting inward file status");}
                              );
         }
       );
    }

  }  

``
and if no result i got flags as

true true false

please advise

thanks

Anes

Well, then you should solve that first, then test with the changes I said (after you solve it). Even if you need to change one or other thing, most part should be already done in what I posted before.

Dear Lucas,
At last I solved the issue now. Using the flag is a bad idea …

I change the provider with a
reject(err);
when catch the exception …

My new ts file is

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {GlobalProvider} from "../../providers/global/global";
import { StatusProvider } from '../../providers/status/status';
import { NumericValidator } from  '../../validators/numeric';
import { Storage } from '@ionic/storage';
/**
 * Generated class for the FilestatusPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-filestatus',
  templateUrl: 'filestatus.html',
})
export class FilestatusPage {
  formgroup:FormGroup;
  inwardno:AbstractControl;
  year:AbstractControl;
  data:any = {}; 
  result: any;
  connectivityFlag: boolean = false;
  public lb : number;
  public lbname: string;
  public LBID : number;
  //public LBName: string;
  public ApplicantLocality : string;
  public ApplicantAddress : string;
  public Date : any;
  public FileStatus: string;
  public FileNo: string;
  public FileID: number;
  public seat: string;
  public subject: string;
  searchFlag: boolean = false;
  //dataFlag: boolean = false;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public http: HttpClient,
              public formbuilder: FormBuilder,
              public statusProvider: StatusProvider,
              public global1:GlobalProvider,
              public alertCtrl: AlertController,
              private storage: Storage,
              public loadingController: LoadingController ) {
                this.formgroup = formbuilder.group({
                //inwardno:['',Validators.required]
                inwardno: ['', [Validators.required,NumericValidator.isValid]],
                year: ['',Validators.required]
              });
              this.inwardno = this.formgroup.controls['inwardno'];
              this.data.inwardno = ''; 
              this.year = this.formgroup.controls['year'];
              this.data.year = '';
              if(this.global1.getnetwork()) {
                this.connectivityFlag = true;
              } else {
                //alert("You are offline, please be online to know building permit status");
                this.presentAlert();
              }

  }
  presentAlert() 
  {
    let alert = this.alertCtrl.create({
    title: 'No Network',
    subTitle: 'You are offline, please be online to know inward, file status',
    buttons: ['OK']
    });
    alert.present();
  }
  getFileStatus ()
  {
    //alert(this.data.efileno);
    var inwardno = this.data.inwardno;
    var year = this.data.year;
    var lbid = this.lb;
    //alert("lbid:"+lbid+"yr:"+year+"inwno:"+inwardno);
    //this.dataFlag = false;
    if(this.global1.getnetwork()) 
    {
      let loader = this.loadingController.create({
        content: "Loading ... "
      });  
      loader.present(); 
      this.statusProvider.getFileStatus(lbid,inwardno,year)
      .then(data => {
        this.searchFlag = true;
        if(data) 
        {
          this.result = data;
          this.LBID =  data[0].intLBID;
          this.ApplicantAddress = data[0].Address;
          this.ApplicantLocality = data[0].Locality;
          this.Date = data[0].dtDateofReceipt;
          this.FileStatus = data[0].StatusEng;
          this.FileID = data[0].intFileID;
          this.seat = data[0].chvSeat;
          this.FileNo = data[0].chvFileNo;
          this.searchFlag = true;
          loader.dismiss();
        } else {
          this.searchFlag = true;
          loader.dismiss();
        } 
        loader.dismiss();
      }).catch(err => {
        this.result = "err";
        this.searchFlag = true;
        loader.dismiss();
        //alert("Service not available");
      }
      );
      //loader.dismiss();
      //this.searchFlag = true;
    } else {
      //alert("You are offline, please be online to know building permit status");
      this.presentAlert();
    }

  }

  async ionViewDidEnter() {
    await this.fetchLBSettings();  
    await this.getLBSettings();
  }
  
  async fetchLBSettings() 
  {
    let lbid = await this.storage.get('lbid');
    let lbname = await this.storage.get('lbname');
    //let distid = await this.storage.get('distid');
    //let lbtype = await this.storage.get('lbtype');
    if(lbid) { 
      //set the value already ...
    } else {
      //Default value if not set before
      this.storage.set('lbid', 290);
      this.storage.set('lbname', 'Amboori Grama Panchayat');
      this.storage.set('distid', 1);
      this.storage.set('lbtype', 5);
    }
  }

  async getLBSettings()
  {
    this.lb = await this.storage.get('lbid');
    this.lbname = await this.storage.get('lbname');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FilestatusPage');
  }

}

Template is

<!--
  Generated template for the FilestatusPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<!--<ion-header>

  <ion-navbar>
    <ion-title>filestatus</ion-title>
  </ion-navbar>

</ion-header> -->
<ion-header>
  <ion-toolbar color="primary">
      <button ion-button menuToggle>
          <ion-icon > <img class="title-image" src="assets/img/samagra.png" /> </ion-icon>
      </button>  
      <ion-title>
              File Status
      </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content padding>
    <h4 style="color:#F00" *ngIf="!connectivityFlag">You are offline, please be online to know building status </h4>
    <form [formGroup]="formgroup" >    
        <ion-item>
            <ion-label stacked>Inward No</ion-label>
            <ion-input type="text" formControlName="inwardno" [(ngModel)]="data.inwardno" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Year</ion-label>
            <ion-input type="text" formControlName="year" [(ngModel)]="data.year" [disabled]="!connectivityFlag" ></ion-input>
        </ion-item>
        <button  ion-button block round [disabled]="!inwardno.valid||!year.valid" (click)="getFileStatus()">Search</button>

    </form> 
    
    <div style="text-align:center" *ngIf="searchFlag && result === 'err'">
        <br /><br />
        <b>No search results , please try again with proper data</b>
    </div>

    <div style="text-align:center" *ngIf="searchFlag && result?.length==null">
        <br /><br />
        <b>No search results , please try again</b>
    </div>
   	<br />
	<br />
	<div class="box-header" *ngIf="result?.length > 0 && result !== 'err'">                 
	                                        <div class="box-header">
	                                           <h3 class="box-title">File Status Details</h3>
                                            </div>
											<div class="box-body no-padding">
                                                <table class="table table-striped"> 
                                                    <tbody>
                                                        
                                                        <tr> 
                                                            <td>Date Received</td>
                                                            <td>{{Date}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Inward No</td>
                                                            <td>{{FileNo}}</td>
                                                        </tr>
														<tr> 
                                                            <td>Local Body Name <br/> </td>
                                                            <td>{{lbname}}</td>
                                                        </tr>
                                                        <tr> 
                                                            <td>Address</td>
                                                            <td>{{ApplicantAddress}}</td>
                                                        </tr> 
                                                        <tr> 
                                                            <td>Locality</td>
                                                            <td>{{ApplicantLocality}}</td>
                                                        </tr> 
                                                                     
                                                        <tr> 
                                                            <td>File Status</td>
                                                            <td>{{FileStatus}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>Seat</td>
                                                            <td>{{seat}}</td>
                                                        </tr> 
														<tr> 
                                                            <td>File ID</td>
                                                            <td>{{FileID}}</td>
                                                        </tr> 
                                                                                                                                                   

                                                    </tbody></table> 
                                            </div> 
                                        </div>  

</ion-content>

Thanks alot for your support and hope it in future too

Anes