umairhm

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

@Component({
  selector: 'element-coercion',
  template: `...`
})
export class ElementCoercionComponent  {
  @Input() elementOne: Element;
  @Input() elementTwo: Element;
}

umairhm

import { Component, Input } from '@angular/core';
import { coerceCssPixelValue } from '@angular/cdk/coercion'; // NEW IMPORT

@Component({
  selector: 'css-pixel-coercion',
  template: `...`
})
export class CssPixelCoercionComponent  {
  // In the following code, `@Input paddingX` will NOT work with strict type checking
  // But we'll make the `@Input paddingY` to work with strict type checking as well

umairhm

<!-- This gets converted as 10px -->
<css-pixel-coercion [padding]="10"></css-pixel-coercion>

<!-- The following strings get bound as-is -->
<!-- The component users can pass in values with other units as well -->
<css-pixel-coercion [padding]="'10px'"></css-pixel-coercion>
<css-pixel-coercion [padding]="'1em'"></css-pixel-coercion>
<css-pixel-coercion [padding]="'1rem'"></css-pixel-coercion>

umairhm

<!-- This will work if we have [style.padding.px] -->
<css-pixel-coercion [padding]="10"></css-pixel-coercion>

<!-- This will work if we have [style.padding] -->
<css-pixel-coercion [padding]="'10px'"></css-pixel-coercion>

umairhm

<!-- Using Angular's Style Binding expression -->
<!-- The value of 'padding' will have 'px' appended to it -->
<!-- But it will be limited only to 'px' and won't allow 'em', 'rem' or '%' -->
<!-- Similarly if we do [style.padding.em], it will be limited to 'em' only -->
<div class="default" [style.padding.px]="padding">
  Hello Coercion, this div has {{ padding }} padding!
</div>

<!-- Using Angular's Style Binding expression -->
<!-- We don't use the unit expression, and leave it open for any value to be passed -->

umairhm

import { Component, Input } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; // NEW IMPORT

@Component({
  selector: 'boolean-coercion',
  template: `...`
})
export class BooleanCoercionComponent  {
  // In the following code, `@Input flagOne` will NOT work with strict type checking
  // But we'll make the `@Input flagTwo` to work with strict type checking as well

umairhm

<!-- Input names only, Angular will set the value as empty string ('') -->
<!-- Supposed to be truthy -->
<boolean-coercion flagOne flagTwo></boolean-coercion>

<!-- Strings true/false, without expressions -->
<boolean-coercion flagOne="false" flagTwo="true"></boolean-coercion>

<!-- Random string values, without expressions -->
<boolean-coercion flagOne="random" flagTwo="random"></boolean-coercion>

umairhm

<!-- Bound with class properties -->
<boolean-coercion
  [flagOne]="booleanTrue"
  [flagTwo]="booleanFalse"
>
</boolean-coercion>

<!-- Bound with strings expressions -->
<boolean-coercion
  [flagOne]="'true'"

umairhm

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

@Component({
  selector: 'boolean-coercion',
  template: `...`
})
export class BooleanCoercionComponent  {
  @Input() flagOne: boolean;
  @Input() flagTwo: boolean;
}

umairhm

import { Component, Input } from '@angular/core';
import { coerceArray } from '@angular/cdk/coercion'; // NEW IMPORT
import { Person } from './person.interface';

@Component({
  selector: 'array-coercion',
  template: `...`
})
export class ArrayCoercionComponent  {
  // In the following code, `@Input strings` will NOT work with strict type checking