Adjust the column width dynamically in an Ionic framework

Question

Need help with changing the size of a Column element dynamically.

<ion-col [size]="this.size" [size-xl]="this.size_xl" [size-md]="this.size_md" [size-sm]="this.size_sm" [size-xs]="this.size_xs">

Facing an error message:

NG0303: Can’t bind to ‘size-xl’ since it isn’t a known property of ‘ion-col’.

NOTE:

Currently, only [size]=“this.size” is functional.

Answer 1

Answer №1

To achieve this, consider implementing the following code snippet:

<ion-col [size]="size" [attr.size-xl]="size_xl" [attr.size-md]="size_md" [attr.size-sm]="size_sm" [attr.size-xs]="size_xs">

It may not be necessary to specify every size individually. Instead, focus on creating a centralized logic for handling the default size attribute.

Answer 2

To achieve this, consider implementing the following code snippet:

<ion-col [size]="size" [attr.size-xl]="size_xl" [attr.size-md]="size_md" [attr.size-sm]="size_sm" [attr.size-xs]="size_xs">

It may not be necessary to specify every size individually. Instead, focus on creating a centralized logic for handling the default size attribute.

Answer 3

Avoid utilizing this. Simply refer to the variable name directly. For instance:

<ion-col [size]="size"></ion-col>

Answer 4

Avoid utilizing this. Simply refer to the variable name directly. For instance:

<ion-col [size]="size"></ion-col>

Answer 5

The reason for this is that those values are not accessible. To resolve this issue, consider rewriting the code snippet as shown below:

<ion-col [size]="this.size" [sizeXl]="this.size_xl" [sizeMd]="this.size_md" [sizeSm]="this.size_sm" [sizeXs]="this.size_xs">

If you want to access these values, you can refer to the library and check the components.d.ts file.

Answer 6

The reason for this is that those values are not accessible. To resolve this issue, consider rewriting the code snippet as shown below:

<ion-col [size]="this.size" [sizeXl]="this.size_xl" [sizeMd]="this.size_md" [sizeSm]="this.size_sm" [sizeXs]="this.size_xs">

If you want to access these values, you can refer to the library and check the components.d.ts file.