Support Binding GridLayout properties

[georgeedwards]

I would like to be able to specify the gridlayout position of an NG2 component with the standard binding syntax, however, the model outlined below doesn't work. Have I got something wrong, is there a work-around, or is this something we can work to support?

test.component.ts:

import {Component, Input} from "@angular/core";

@Component({
    selector: "test",
    templateUrl: `Components/Test/test.html`,
    providers: []
})

export class Test{
    @Input() labelRow: number;
    @Input() labelCol: number;
    @Input() labelColSpan: number;
    @Input() labelRowspan: number;
}

test.html:

<Image src="res://test" stretch="aspectFit" [row]="lableRow" [col]="labelCol" [colSpan]="labelColSpan" [rowSpan]="labelRowSpan6"></Image>

parent.html:

<GridLayout columns="*, *, *, *" rows="15*, 5*, 20*, 5*, 5*, 5*, 5*, 20*, 20*" width="100%" height="100%" style.backgroundColor="white">
    <test [labelRow]="2" [labelCol]="0" [labelRowSpan]="6" [labelColSpan]="2"></test>
</GridLayout>

The above displays the test component in my parent, however, it is located in the top left corner. If I manually set the grid positions statically in the test component, then the layout works fine.

[vakrilov]

@georgeedwards
I noticed that there is a typo in your test.html template that probably why your solution is not working.
Here is what I did and it worked fine:

import {Component, Input} from "@angular/core";

@Component({
    selector: "test",
    template: `
    <Label text="hi there!" backgroundColor="red"
        [row]="labelRow" [col]="labelCol" 
        [colSpan]="labelColSpan" [rowSpan]="labelRowspan"></Label>
  `
})
export class TestComponent {
    @Input() labelRow: number = 0;
    @Input() labelCol: number = 0;
    @Input() labelColSpan: number = 1;
    @Input() labelRowspan: number = 1;
}

@Component({
    selector: "my-app",
    directives: [TestComponent],
    template: `
<GridLayout rows="* * * *" columns="* * * *">
    <test labelRow="1" labelCol="1" labelColSpan="2" labelRowspan="2"></test>
</GridLayout>
`,
})
export class AppComponent { }