Hey everyone,

when working with own components in a GridLayout I noticed that properties like row, col and colSpan are not working on the custom component (aswell as class, flexGrow, alignSelf, etc.). I mean, it makes sense since those properties are not defined on my custom component.

For instance, simple stuff like this would render both the Label and my-cool-component in the first row of the GridLayout, since the layout defaults row and column back to 0.

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

@Component({
    selector: 'my-cool-component',
    template: `<Label text="I am in the second row."></Label>`
})
export class MyCoolComponent {
}

@Component({
    selector: "ns-app",
    template: `<GridLayout rows="100, 100, 100", columns="*">
        <Label text="I am in the first row" row="0"></Label>
        <my-cool-component row="1"></my-cool-component>
        <Button text="I am in the third row" row="2"></Button>
    </GridLayout>
    `
})
export class AppComponent { 

}

How can I make these properties work with own components though?

• Looking at the ts-declaration files of NativeScript's components (for instance tns-core-modules/ui/text-view/text-view.d.ts) reveals that all of them inhererit from ViewBase. In ViewBase properties like row and col and defined. Simply inherting my component from ViewBase (export class MyCoolComponent extends ViewBase) does not make these properties work for the GridLayout.
• Defining the properties via @input does not work either (export class MyCoolComponent { @Input() col: number; @Input() row: number; }) for the GridLayout.
• The ugly solution would be to wrap my-cool-component in a, for instance, StackLayout and set row and col on the StackLayout.

Is there any way I can make my component defining row and col with the outer GridLayout using these properties (same goes for all the other propreties the components included in NativeScript have)? Did I somehow misunderstand what components are there for? Is there a piece of documentation which i just didnt see and points to a solution of my problem?