Ionic2 beta 7 - ViewChild

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 ()

    loading: new ViewChild('loading');

my loading class:

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


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

    this.ocupado = true;

    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 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

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>


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

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 and i got

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

and i try 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:

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.

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.

Have you tried using the stock Ionic loading component?

export class MyPage {
  constructor(nav:NavController) {
    let loading = Loading.create({
      // options
    doTimeConsumingThing().then(() => {

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


@ViewChild(‘loading’) objload: Any;

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