Css-animator: View child not working

Ionic Framework ionic-v3
1

Hi all,

I am using ionic 3 with animations.

I installed

npm install --save css-animator

Here is my Template

<div class="alert" *ngIf="!show" #myElement> 
  <h5>Here is my animation</h5>
</div>

<ion-footer>
  <ion-row ion-button class="btn-full" *ngIf="show">
    <ion-col text-left (click)="nav()">
        Checkout   <ion-icon name="cart"></ion-icon>
    </ion-col>
    <ion-col text-right>
        <img src="./assets/images/rupee-black.svg" alt="Rupee">4200
    </ion-col>
  </ion-row>
</ion-footer>

I declare variable and the name is show also import view child

 import { Component,ViewChild } from '@angular/core';
import { AnimationService, AnimationBuilder } from 'css-animator';

export class CartPage {

show:boolean=true;
@ViewChild('myElement')myElem;
private animator: AnimationBuilder;
constructor(animationService: AnimationService,public navCtrl: NavController, public navParams: NavParams) {
    this.animator=animationService.builder();
  }

  nav()
  {
    var i=document.querySelector('alert');
  	this.show=false;
    this.animator.setType('bounce').show(this.myElem.nativeElement);
  }

 }

I am getting this error.

Cannot read property ‘nativeElement’ of undefined

How can i fix this issue.

Kindly advice me,

Thanks

2

Hello,

I am complete new to ionic, so it is more a guess. Similar failure I got, when I have forget () at a method or the variable has a runtime no value or not the correct type.

Best regards, anna.