Error "TypeError: ... is not a function" when trying to use a component function in template

Question

I have a component as following and I am trying to provide my svg viewBox dimension dynamically, injected from my bootstrap in main.ts.

import {Component} from 'angular2/core';
import {CircleComponent} from './circle.component';
import {Circles} from './circles.service';

@Component({
    selector: 'my-app',
    styleUrls: ['./app/app.component.css'],
    directives: [CircleComponent],
    providers: [Circles],    
    template: `
        <svg [attr.viewBox]="getViewBox()" preserveAspectRatio="xMidYMid meet">
            <svg:g my-circle *ngFor="#circle of circles.circles" [circle]="circle" />
        </svg>
    `
})
export class AppComponent{
    static parameters = [Circles, 'canvasWidth', 'canvasHeight'];

    constructor(circles: Circles, canvasWidth: Number, canvasHeight: Number) {
        this.circles = circles;
        this.width = canvasWidth;
        this.height = canvasHeight;
    }    

    function getViewBox(): String {
        return `0 0 ${this.width} ${this.height}`;
    }
}

My main.ts

import {provide}        from 'angular2/core';
import {bootstrap}      from 'angular2/platform/browser'
import {AppComponent}   from './app.component'

bootstrap(AppComponent, [
    provide('canvasWidth', {useValue: 900}),
    provide('canvasHeight', {useValue: 300})
]);

And the exception I get

EXCEPTION: TypeError: l_context.getViewBox is not a function in [getViewBox() in AppComponent@1:13]

I'm not sure it's a good way to do this thing, but this information is needed elsewhere in my circles.service. One thing I don't like though is that I cannot specify the Number type so I have to define static parameters = [Circles, 'canvasWidth', 'canvasHeight']; in AppComponent.

Pankaj Parkar · Accepted Answer · 2016-03-05 21:21:56Z

3

Remove function from your method declaration, It will look like below.

getViewBox(): String {
    return `0 0 ${this.width} ${this.height}`;
}

Basically what happen behind the scene is when you write class method with function, transpiled JavaScript throw that function outside of that prototype function returned by the name of class. That's why it become unreachable.

In this case you would have get error at compile, if you are using typescript with better tool like Visual Studio/Web Strom.

export class App{
    function test(){
        console.log();
    }
}

Transpiled As

"use strict";
var App = (function () {
    function App() {
    }
    return App;
}());
exports.App = App;
function test() {
    console.log();
}

Code Link

edited Mar 5, 2016 at 21:21

answered Mar 5, 2016 at 21:14

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Noone Over a year ago

oh, I thought it was the way to define a function, you're right, it's working when I remove it...

Noone Over a year ago

I have another function in another class and if I remove the function keyword, that one is failing...

Noone Over a year ago

I read your full answer and I understand why my other case was falling, I had to use this.functionName() but I was using functionName() without this, then with the function keyword, It could be found some ways...

Noone Over a year ago

do you think it's a good way to inject the canvas width/height like I do or I should use another method? I should maybe create a new question

Pankaj Parkar Over a year ago

@JCorriveau I think lets open up new.. we can't really relate these both issue together.. Thanks :-)

|

Collectives™ on Stack Overflow

Error "TypeError: ... is not a function" when trying to use a component function in template

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related