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

Community · Accepted Answer · 2017-05-23 12:25:42Z

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);
    }
 }

2 Comments

Günter Zöchbauer Over a year ago

"it doesn't work" is not very helpful. Any error message?

Jordan _RP Over a year ago

I did that you said but nothing and it doesn't show any error message... only it doesn't show the information

Jordan _RP · Accepted Answer · 2016-03-09 17:04:39Z

0

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)

answered Mar 9, 2016 at 17:04

Jordan _RP

114 bronze badges

Collectives™ on Stack Overflow

Pass data between classes with @Input Angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related