Pass data between classes with @Input Angular 2

Question

I am a noob here, but I need some of help, I am doing a Ionic 2 aplication and this is about search, so i have a main template which i will insert a new template with result's, so i got problem fot to pass the search key from de main template to the result template, i was trying with the @Input but I am a noob, and I want learn,I would greatly appreciate your help...

This is the main code App.html my variable is "prueba":

<div id="sbar">
 <ion-searchbar id="searchbox" (keyup)='upkey($event)' (keydown)='downkey($event)' [recibir]="prueba" //here i declare the bindding variables></ion-searchbar>
</div>

this is my App.js code where i assign the search key:

class MyApp {
  constructor(app: IonicApp, platform: Platform, http: Http) {
   this.app = app;
   this.platform = platform;
   this.http=http;

   this.prueba = "Search_Key"; //my variable

   this.Leyes = [];
   this.url = 'http://##########/resultados.json?q='; 
   this.initializeApp();

   this.pages = [
     { imagen: 'build/img/home.png', title: 'Home', component: GettingStartedPage },
     { imagen: 'build/img/info38.png', title: 'Ayuda', component: AyudaHTML },
     { imagen: 'build/img/faq7.png', title: 'Preguntas Frecuentes', component: FaqHTML }
     { imagen: 'build/img/cloud158.png', title: 'Actualizaciones', component: ActualizacionesHTML },
     { imagen: 'build/img/news29.png', title: 'Novedades', component: NovedadesHTML },
     { imagen: 'build/img/two205.png', title: '¿Te gustaría colaborar?', component: ColaborarHTML },
     { imagen: 'build/img/multiple25.png', title: 'Acerca', component: AcercaHTML},
     ];
  this.rootPage = GettingStartedPage;
  }

  initializeApp() {
  this.platform.ready().then(() => {
  });
}

And this is the other template where I receive the Input with the name "recibir":

export class GettingStartedPage{
    @Input() recibir;//this the Search_key that I receive
    constructor(app: IonicApp,http: Http) {
        this.http=http;
        this.Leyes = [];
        this.url = 'http://www.##########/resultados.json?q='; 
        alert("Recibira :" + this.recibir);
        this.buscar(this.recibir);
    }
 }

Please help me...it doesn't work i don't know why

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

The value for an input is not yet available in the constructor.

Use ngOnInit() instead. When ngOnInit() is called, Angular is done initializing the component and bindings are resovled.

export class GettingStartedPage{
    @Input() recibir;//this the Search_key that I receive
    constructor(app: IonicApp,http: Http) {
        this.http=http;
        this.Leyes = [];
        this.url = 'http://www.##########/resultados.json?q='; 
    }

    ngOnInit() {
        alert("Recibira :" + this.recibir);
        this.buscar(this.recibir);
    }
 }

See also

edited May 23 '17 at 12:25

Community

1
1

answered Mar 04 '16 at 16:04

Günter Zöchbauer

623,577
216
2,003
1,567

"it doesn't work" is not very helpful. Any error message? – Günter Zöchbauer Mar 04 '16 at 21:29
I did that you said but nothing and it doesn't show any error message... only it doesn't show the information – Jordan _RP Mar 04 '16 at 21:35

score 0 · Accepted Answer · answered Mar 09 '16 at 17:04

I decided to use that:

export class GettingStartedPage implements OnInit{

constructor(app: IonicApp,http: Http) {

this.http=http;
this.Leyes = [];
this.url = 'http://www.leybook.com/resultados.json?q='; to  
this.val = app.getComponent('searchbox').value;(<--- This gets the value directly of "searchbox" in my main template, This worked for me)
alert(this.val);
}
ngOnInit(){    
  this.buscar(this.val); 
}
}

i hope to help to other noob like me .... (Y)

Pass data between classes with @Input Angular 2

2 Answers2