css-pixel-coercion.component.html

<!-- 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 -->
<!-- We can do similar to above example using a custom conversion method -->
<!-- But again, we will limit to a certain unit, e.g. 'px' or 'em' -->
<div class="default" [style.padding]="padding">
  Hello Coercion, this div has {{ padding }} padding!
</div>

css-pixel-coercion.component.ts

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

@Component({
  selector: 'css-pixel-coercion',
  templateUrl: './css-pixel-coercion.component.html'
})
export class CssPixelCoercionComponent  {
  @Input() padding: string;
}