Utility decorator functions for coercing Angular component @Inputs into specific types
npm install coerce-propertyUtility decorator functions for coercing Angular component @Inputs into specific types.
Used by Angular CDK coercions.
Support Angular >=15.
``shDo not forget to check if Angular CDK is installed
npm i -S @angular/cdk
Coercions
-
- decorator factory -
@coerceBoolean- coerces a data-bound value (typically a string) to a boolean For example:
`html
`
ts
@Input()
@coerceBoolean
disabled: boolean; // true
` -
- wraps the provided value in an array, unless the provided value is an array For example:
`html
`
ts
@Input()
@coerceArray
items: string[]; // ['item']
` -
- coerces a value to a CSS pixel value For example:
`html
`
ts
@Input()
@coercePixel
width: string; // '200px'
` -
- coerces an ElementRef or an Element into an element -
@coerceNumber - coerces a data-bound value (typically a string) to a number For example:
`html
`
ts
@Input()
@coerceNumber
age: number; // 19
`Usage
ts
import { Component, Input } from "@angular/core";
import { coerceBoolean } from "coerce-property";@Component({
selector: "app-component",
template:
,
})
export class SampleComponent {
@Input()
@coerceBoolean
disabled: boolean;
}
`You can use:
html
`and
html
`How does it work
ts
import { Component, Input } from "@angular/core";
import { coerceBooleanProperty } from "@angular/cdk/coercion";@Component({
selector: "app-component",
template:
,
})
export class SampleComponent {
private _dsiabled: boolean;
@Input()
get disabled() {
return this._dsiabled;
}
set disabled(disabled) {
this._disabled = coerceBooleanProperty(disabled);
}
}// @angular/cdk/coercion/boolean-property.ts
export function coerceBooleanProperty(value: any): boolean {
return value != null &&
${value} !== "false";
}
``