Turn Function into Variable in Angular2 Component Class

Question

How do I change the cellRenderer function into a reusable variable? I have tried using a constructor, and declaring a variable, seems simple, but any help would be appreciated.

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: '<ag-grid-ng2 class="ag-fresh" style="height: 300px"    [columnDefs]="columnDefs"   [rowData] = "rowData"></ag-grid-ng2>',
    directives: [(<any>window).ag.grid.AgGridNg2]
})
export class SampleAppComponent {

    columnDefs = [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        {
            headerName: "Price",
            field: "price",
            cellClass: 'rightJustify',
            cellRenderer: function (params: any) {
                return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
            }
        }
    ];
}

What am I doing wrong here?

export class SampleAppComponent {

constructor() {
    this.convertToMoney = function (params: any) {
        return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
    };


columnDefs = [
    { headerName: "Line Type", field: "line" },
    { headerName: "Expense Type", field: "expense" },
    {
        headerName: "Totals",
        field: "totals",
        cellClass: 'rightJustify',
        cellRenderer: convertToMoney()
    }
];

Poul Kruijt · Accepted Answer · 2016-02-01 19:37:06Z

1

Not entirely sure what you are trying to achieve here, and not to sound rude, but perhaps checking the proper syntax of typescript first will help you achieve, and understand what you must do.

Anyways.. I will try to help you a bit, I believe you would like a class like this?

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: '<ag-grid-ng2 class="ag-fresh" style="height: 300px"    [columnDefs]="columnDefs"   [rowData] = "rowData"></ag-grid-ng2>',
    directives: [(<any>window).ag.grid.AgGridNg2]
})
export class SampleAppComponent {

    public columnDefs : any[] = [
        { headerName: "Line Type", field: "line" },
        { headerName: "Expense Type", field: "expense" },
        {
            headerName: "Totals",
            field: "totals",
            cellClass: 'rightJustify',
            cellRenderer: this.convertToMoney //reference to class' convertToMoney method
        }
    ];       

    constructor() {}

    private convertToMoney(params: any) : string {
        return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
    } 

}

answered Feb 1, 2016 at 19:37

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

1 Comment

AnotherMike Over a year ago

Thank You! I will strictly go off the typescript reference from now on. Was referencing ES6 which I thought was the same syntax here: link

Collectives™ on Stack Overflow

Turn Function into Variable in Angular2 Component Class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related