javascript - How to resolve self.context.anim is not a function error in ionic 2? -

i creating wheel of fortune in ionic 2 , angular 2 using html5 canvas it's animating nice want when click on button should start animating. when calling function on button it's showing

typeerror: self.context.anim not function

here home.ts page

import { component, viewchild } '@angular/core';  import { navcontroller } 'ionic-angular';  @component({   selector: 'page-home',   templateurl: 'home.html' }) export class homepage {     @viewchild('layout') canvasref;     ngafterviewinit() {         let canvas = this.canvasref.nativeelement;         let context = canvas.getcontext('2d');         canvas.width = 300;         canvas.height = 300;         function rand(min, max) {             return math.random() * (max - min) + min;         }         var color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"];         var label = ['10', '200', '50', '100', '5', '500', '0', "jpot"];         var slices = color.length;         var slicedeg = 360 / slices;         var deg = rand(0, 360);         var speed = 0;         var slowdownrand = 0;         var ctx = context;         var width = canvas.width; // size         var center = width / 2;      // center         var isstopped = false;         var lock = false;          function deg2rad(deg) {             return deg * math.pi / 180;         }          function drawslice(deg, color) {             ctx.beginpath();             ctx.fillstyle = color;             ctx.moveto(center, center);             ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + slicedeg));             ctx.lineto(center, center);             ctx.fill();         }          function drawtext(deg, text) {             ctx.save();             ctx.translate(center, center);             ctx.rotate(deg2rad(deg));             ctx.textalign = "right";             ctx.fillstyle = "#fff";             ctx.font = 'bold 30px sans-serif';             ctx.filltext(text, 130, 10);             ctx.restore();         }          function drawimg() {             ctx.clearrect(0, 0, width, width);             (var = 0; < slices; i++) {                 drawslice(deg, color[i]);                 drawtext(deg + slicedeg / 2, label[i]);                 deg += slicedeg;             }         }            //document.getelementbyid("spin").addeventlistener("mousedown", function () {         //    isstopped = true;         //}, false);          drawimg();         function anim () {                 deg += speed;                 deg %= 360;                 // increment speed                 if (!isstopped && speed < 3) {                     speed = speed + 1 * 8;                 }                 // decrement speed                 if (isstopped) {                     if (!lock) {                         lock = true;                         slowdownrand = rand(0.994, 0.998);                     }                     speed = speed > 0.2 ? speed *= slowdownrand : 0;                 }                 // stopped!                 if (lock && !speed) {                     var ai = math.floor(((360 - deg - 90) % 360) / slicedeg); // deg 2 array index                     ai = (slices + ai) % slices; // fix negative index                     return alert("you got:\n" + label[ai]); // array item end degree                 }                  drawimg();                 window.requestanimationframe(anim);             } ;             //anim();      }    constructor(public navctrl: navcontroller) {       }    onlink(url: string) {       window.open(url);   } } 

here home.html

<ion-header>   <ion-navbar>     <ion-title>       ionic blank     </ion-title>   </ion-navbar> </ion-header>     <ion-content class="home" padding>     <canvas #layout></canvas>     <button (click)="anim(animation)">         button item     </button>    </ion-content> 

please me out. in advance.

set anim function class not inside ngafterviewinit().

like so:

export class homepage {     @viewchild('layout') canvasref;     ngafterviewinit() {      //...     } //define class function function anim () {                 deg += speed;                 deg %= 360;                 // increment speed                 if (!isstopped && speed < 3) {                     speed = speed + 1 * 8;                 }                 // decrement speed                 if (isstopped) {                     if (!lock) {                         lock = true;                         slowdownrand = rand(0.994, 0.998);                     }                     speed = speed > 0.2 ? speed *= slowdownrand : 0;                 }                 // stopped!                 if (lock && !speed) {                     var ai = math.floor(((360 - deg - 90) % 360) / slicedeg); // deg 2 array index                     ai = (slices + ai) % slices; // fix negative index                     return alert("you got:\n" + label[ai]); // array item end degree                 }                  drawimg();                 window.requestanimationframe(this.anim.bind(this));             }   }//end of class