Make an Angular component to use layout properties such as row, col, dock and etc


I have a custom Angular component which I want to use in a grid from example. I tried to set a row and col attributes, but without luck.
Is it possible in Angular to inherit somehow the standard layout attributes?


I think we need a code sample to see what you’re trying to accomplish. Sounds like something is nested and not inheriting the parent’s attributes? Can you use the playground to show?


You can just add inputs for the standard properties you want to accept.


@Input() row: number = 0; // Default
@Input() col: number = 0; // Default
@Input() colSpan: number = 0;
@Input() rowSpan: number = 0;
@Input() margin = '0';

Then in your custom component’s template…

<GridLayout [row]="row" [col]="col" [colSpan]="colSpan" [rowSpan]="rowSpan" [margin]="margin"></GridLayout>


@bozhidarc In some cases, i just use the component also as an attribute.

selector: "compName, [compName]"


<StackLayout row="1" compName></StackLayout>


I managed to do it by binding the component selector with StackLayout.

import {registerElement} from "nativescript-angular/element-registry";

registerElement("my-angular-component-selector", () => require("ui/layouts/stack-layout").StackLayout);

I was trying to do it in the main.ts file before the app is booted, it should be done after that.
For me it works best when I move it to the app.component.ts file.
After that you can apply styles/classes directly on the angular component, without proxying them to internal template.


Wow. Never tried this before. Haven’t checked if it has any implications but it does the trick perfectly.