Ionic2 beta 7 - ViewChild

Ionic Framework ionic-v3
1

Hi everyone,

it’s my first time here and i’m new in Ionic so… id like know how use the viewchild with the component?
i try the code in changelog but no sucess. My code:

the import…

import {ViewChild} from "@angular/core";

my decorator ()

@Page({
  templateUrl:"build/pages/lancamento/lancamento.html",
  queries:{
    loading: new ViewChild('loading');
  }
})

my loading class:

import {Component} from '@angular/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
  selector:'loading-modal',
  templateUrl:'build/pages/components/loading-modal/loading-modal.html',
  directives:[IONIC_DIRECTIVES]
})

export class LoadingModal {
  constructor() {
    this.ocupado = false;
  }

  show(){
    this.ocupado = true;
  }

  hide(){
    this.ocupado = false;
  }

}

and i call de component in app.html

<loading-modal id="loading"></loading-modal>

well, when i call the method in this,loading i got

_this.loading.show is not a function

so. how i can use this viewchild? in beta 6 getComponent(‘componentId’) worked well.

Thks… and sorry for the poor english… i’m Brazilian and my english need improvement

2

Close. So in your queries, you have 2 ways of getting the component, ClassName or reference variable.

Now you’re was close by using

loading: new ViewChild('loading');

but instead of

<loading-modal id="loading"></loading-modal>

try

<loading-modal #loading></loading-modal>
3

Hello @mhartington thanks for the answer, well i try this but no success…

i change in app.html the ‘id=loading’ to ‘#loading’ and my queries:

@Page({ templateUrl:"build/pages/lancamento/lancamento.html", directives:[DataFilter], queries:{ load: new ViewChild('loading') } })

so… how i can call the load ?

i try call the method show in my loading component

this.load.show() and i got

Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: TypeError: Cannot read property 'show' of undefined

and i try load.show() too but i got:

ReferenceError: load is not defined

how i can call the method of my component in another controls?
sorry for the difficulty i’m new on ionic :slight_smile:

4

This looks far more complicated than it needs to be. I think everything would go better if you backed up and described what you want to do. I don’t think you really want to be calling (or even defining) these show() and hide() methods.

5

Hi @rapropos, i try what you say in another post, but what i need is show a spinner load and block the screen until the promisse return with for exemple: a list of things.

6

Have you tried using the stock Ionic loading component?

@Page()
export class MyPage {
  constructor(nav:NavController) {
    let loading = Loading.create({
      // options
    });
    nav.present(loading);
    doTimeConsumingThing().then(() => {
      loading.dismiss();
    });
  }
}
7

Humm. no i dont…i 'll try… thanks

8

Define

@ViewChild(‘loading’) objload: Any;

after the export class. then, access the object by using

this.objload