CODEWITHSUNDEEP
angularionic2
chack
chack

Reputation: 37

Refresh parent Content out of child View

is there a simple way, where I can tell the Parent View to refresh it's content?

Filter Video

In this case I'm changing the sort Model and would like to query my http Request with this new Model status. 

import {Component} from '@angular/core';
import {LoadingController,NavController,PopoverController,ViewController} from 'ionic-angular';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
template: `
<ion-list radio-group [(ngModel)]="suchService.sort" class="popover-page">
  <ion-item>
    <ion-label>Entfernung aufsteigend</ion-label>
    <ion-radio (click)="sortchange()"value=""></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Neueste zuerst</ion-label>
    <ion-radio (click)="sortchange()"value="9"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Preis aufsteigend</ion-label>
    <ion-radio (click)="sortchange()"value="1"></ion-radio>
  </ion-item>
</ion-list>
`
})
class PopoverPage {

constructor(private suchService: SuchService, private viewController: ViewController) {

}
sortchange(){
  console.log("HALLO?"); <-- CALL FUNCTION OF ERGEBNISSE
  this.viewController.dismiss();
}
}
export class Ergebnisse {
.....
getResults(){...}
....
}

I can't import the Ergebnisse class into my Popoverpage... Even if I use another .ts File for the Popoverpage...

Upvotes: 0

Views: 2227

Answers (2)

chack
chack

Reputation: 37

Hey thanks everybody for your answer.

Put I used some ionic specific API to solve it.

I was creating the Child Popover via

presentPopover(ev) {

let popover = this.popoverCtrl.create(PopoverPage, {});

popover.present({
  ev: ev
});

Then there is some listener from Ionic which solves my Problem.

popover.onDidDismiss(data => {
//Can Use Data which is passed by Popover
});

Upvotes: 1

VtoCorleone
VtoCorleone

Reputation: 17203

Here is a great read about component interaction

Use @Output in your child and then listen for it in the parent

child component .ts - declare an Output variable that is going to emit an event when it is called in your function.

@Output() sortChangedEvent = new EventEmitter<any>();

sortChange() {
  this.sortChangedEvent.emit({sortOrder: 'asc'});
}

Parent component html - link the child event emitter with a function in your parent component

<child-component (sortChange)="refereshListOrder($event)"></child-component>

Parent component .ts - create a function which listens for the event

refreshListOrder(event) {
  // sudo code below
  service.getData().withSortOrder(event.sortOrder);
}

Upvotes: 1

Related Questions