umairhm

import { Component, Input } from '@angular/core';
import { Person } from './person.interface';

@Component({
  selector: 'array-coercion',
  template: `...`
})
export class ArrayCoercionComponent  {
  @Input() strings: Array<string>;
  @Input() persons: Array<Person>;

umairhm

<!-- person1 & person2 are objects of type Person  -->
<array-coercion
  [strings]="['array item 1', 'array item 2']"
  [persons]="[person1, person2]"
></array-coercion>

umairhm

<!-- person1 is an object of type Person  -->
<array-coercion
  [strings]="'array item 1'"
  [persons]="person1"
></array-coercion>

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

umairhm

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

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

umairhm

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

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

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

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

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

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