asked on

Get search results without refreshing the page

I have search button where user inputs data (year,week,page) and gets data in grid format. When user wants to search for another data,i have to refresh the page to get correct data.

I want to get a correct data without refreshing the page manually. I think this has something to do with ngOnDestroy but I am not understanding how to impliment this.

I have gone through many questions and post but did not understand it properly.

Below is my code.

search-component.ts

 flyersearch(event, week: any, seite: any): void {
    let temp = week.split('-W');
    let jahr = temp[0];
    let woche = temp[1];
    let flyerBild: string;
    this.flyerhammService.getFlyer(jahr, woche, seite)
      .then(
        flyers => {
          this.flyers = flyers;
          this.x = this.flyers[0].ArtNr;
        }
      ).catch(
        error => console.log(error)
      );
  }

Open in new window

search-component.html

<md-card class="default-card">
  <h1>{{ 'Suche Flyer' }}</h1>
</md-card>
<md-card class="default-card">
  <form id="flyer-search">
    <table class="calender" cellspacing="0">
      <tr>
        <td>
          <md-input-container>
            <input mdInput placeholder="{{ 'Weak and Year' }}" type="week" #week name="week" value="2017-W17">
          </md-input-container>
        </td>
        <td>
          <md-input-container>
            <input mdInput placeholder="{{ 'Seite' }}" type="number" #seite name="seite" value="01" min="01">
          </md-input-container>
        </td>
        <td>
          <md-card-actions align="end">
            <button md-raised-button color="primary" (click)="flyersearch($event,week.value, seite.value)">
              {{ 'Search' }}
              <md-icon>search</md-icon>
            </button>
          </md-card-actions>
        </td>
      </tr>
    </table>
  </form>
</md-card>
<app-raster *ngIf="flyers!= null" [flyers]="flyers"></app-raster>

Open in new window

Can anyone tell me how to get the correct data without refreshing the page?

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ruchir Naphade

ASKER

@Julian...kindly find below code.

I changed my service from Promise to observable.I am sending search results from FlyerSearchComponent to Raster Component.

FlyerSearchComponent.ts

export class FlyerSearchComponent {

  errorMessage: string;
  public flyers: Observable<Flyer[]>;
  public x: string;
  artnr: string;
  produkt: Produkt;
  imageUrl: string;

  private produktUrl = environment.apiUrl + 'static';

  constructor(private flyerhammService: FlyerHammService,
    private route: ActivatedRoute,
    private location: Location,
    private produktService: ProduktService) { };

  flyersearch(event, week: any, seite: any): Observable<Flyer[]> {
    let temp = week.split('-W');
    let jahr = temp[0];
    let woche = temp[1];
    let flyerBild: string;
    this.flyerhammService.getFlyer(jahr, woche, seite)
      .subscribe(
        flyers => {
          this.flyers = flyers;
          // this.x = this.flyers[0].ArtNr;
        }
      );
    return this.flyers;
      // .catch(
      //   error => console.log(error)
      // );
  }
}

Open in new window

FlyerHammService.ts

@Injectable()
export class FlyerHammService {
  constructor(private http: Http,
              private authenticationService: AuthenticationService) { }

  private headers = new Headers({
    'Access-Control-Allow-Headers': 'Content-Type, X-Auth-Token, Origin, Authorization',
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + this.authenticationService.token
  });
  private flyerhammUrl = environment.apiUrl + 'rullko/hamm/flyer';

  getFlyer(jahr: string, kw: string, seite: string): Observable<Flyer[]> {
    const url = `${this.flyerhammUrl}/${jahr}/${kw}/${seite}`;
    return this.http.get(url, { headers: this.headers })
      .map(this.extractData)
      .catch(this.handleError);
  }

Open in new window

Julian Hansen

Have you considered upgrading Angular and using HttpClient instead of Http?

Julian Hansen

Have you considered upgrading Angular and using HttpClient instead of Http?

Ruchir Naphade

ASKER

Nopes...I have not considered that option..should i update it? Even if i want to upgrade it, i have to first complete this and then i can upgrade from 4 to 6..

Ruchir Naphade

ASKER

This is my office work where I am using Angular 4 and in my university project, I am using Angular 5 which i want to upgrade it to Angular 6. I have been trying to upgrade it to 6 but facing some issues while doing so..I guess for that also i need your guidance. Although, I have gone through to Angular upgradation document but could not do it properly..but for my work that it not priority...

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ruchir Naphade

ASKER

okay...i will try that..

Ruchir Naphade

ASKER

Thanks a lot Julian...!!

Julian Hansen

You are welcome.