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


#1

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?


#2

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? play.nativescript.org


#3

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

i.e.

@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>

#4

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

selector: "compName, [compName]"

then

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


#5

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.


#6

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