Equivalent of @ViewChild when using ES6 in Ionic2

Ionic Framework ionic-v3
1

First of all I am new to Ionic2 and even Ionic and Angular in general.

I am trying to implement slides and I need to have a reference to the slider so I can trigger the next event with a custom button.

To do this, it is suggested to get a reference like so (In TypeScript):
@ViewChild('slides_element_id') slider;

Since I am using ES6, it gives me:
Missing class properties transform

And this @ViewChild('onboarding_slides') slider: any;
Gives Unexpected token for the :

I see alot of people saying that this is not the way to do it in ES6 as it is not supported, and I don’t really mind because I’m not a fan of strong tying. But I see no examples on how to properly get a reference to the silder.

This didn’t work.

2

See this cookbook:

https://angular.io/docs/ts/latest/cookbook/ts-to-js.html

“Query Decorators” section

3

Thank you for the quick reply.

I will try again tomorrow, I must be tired, this look more complicated than I expected. I thought it would be easy to get a reference to an element in the page.

4

Ok, that works.
So this TypeScript way to access a view child:

@ViewChild('mySlider') slider: Slides;

Is done by adding queries to the Component in ES6:

 queries: {
    slider: new ViewChild('mySlider')
 }
5

Pulling from the site docs

In TypeScript we can also use the queries metadata instead of the @ViewChild and @ContentChild property decorators.

So this works for both @ViewChild and @ContentChild

6

Can you give more details about it? I’m trying to do something similar without any success…

7

Here is an example.

import {ViewChild} from 'angular2/core';

and on your Page decorators,

@Page({
  templateUrl: 'build/pages/slides/slides.html',
  queries: {
    slider: new ViewChild('my_slides')
  }
})

this.slider can now be called.

8

Hi @epetre, didnt work for me too…

@Page({
  templateUrl: 'build/pages/slides/slides.html',
  queries: {
    slider: new ViewChild('my_slides')
  }
})

How can i access “queries” => “slider” key?

constructor(app, nav, slider) {
    this.slider  = slider;
}

Thanks!

9

Don’t do it in the constructor, it’s already assigned to this.slider by that time and you are probably overriding it with an empty object.

11

This works for me…

JS
@Page({ templateUrl: 'path/to/myfile/.html', queries: { slider: new ViewChild('slides') } })

HTML
<ion-slides pager #slides> ... </ion-slides>

12

try this
import { Slides } from ‘ionic-angular’;
and
@ViewChild(Slides) slides: Slides;

13

It seems that you need to add a variable with the same name in the class to access the slider, right?

14

https://angular.io/docs/ts/latest/cookbook/ts-to-js.html
this link not available now