<!-- Native Class and Style Attributes -->
<input class="is-danger my-button" style="border: none; color: blue">
 
<!-- Angular class and style Bindings -->
<input [class.is-danger]="booleanProp" [style.border]="borderProp">
 
<!-- ngClass -->
<input [ngClass]="{'is-danger': booleanProp, 'myButton': true}">
<input [ngClass]="isDangerButton">
 
<!-- ngStyle -->
<input [ngStyle]="{'border': borderProp, 'color': colorProp}">
<input [ngStyle]="hasColorBorder">
 
<!-- 
booleanProp, borderProp, etc...
would be properties from our
Typescript class
-->

export class MyComponentClass {
  myStringProperty = "is-info is-item has-border";
  myArrayProperty = ['is-info', 'is-item', 'has-border'];
  myObjectProperty = {'is-info': true, 'is-item': true};
}

<button type="button" class="big-font" [ngClass]="classStyler">Submit</button>
 
<div>
  <label for="one">Terms of Service</label>
  <input #one id="one" type="checkbox" (change)="updateTos(one.checked)">
 
  <label for="two">Send Usage Information</label>
  <input #two id="two" type="checkbox" (change)="updateUsage(two.checked)">
</div>
export class StatusButtonComponent implements OnInit {
 
  tosSigned = false;
  sendUsage = false;
 
  // [ngClass]="classStyler" 
  classStyler = {
    warning: false,
    info: false,
    error: !this.tosSigned,
    success: this.tosSigned,
  }
 
  // ...
 
  updateStyle() {
    this.classStyler.error = !this.tosSigned;
    this.classStyler.success = this.tosSigned && this.sendUsage;
    this.classStyler.warning = this.tosSigned && !this.sendUsage;
  }
 
}
.warning {
  background: hsl(48, 100%, 67%);
  border: 5px solid hsl(48, 100%, 67%);
  color: black;
}
 
.error {
  background: hsl(348, 100%, 61%);
  border: 5px solid hsl(348, 100%, 61%);
  color: white;
}
 
.success {
  background: hsl(141, 71%, 48%);
  border: 5px solid hsl(141, 71%, 48%);
  color: white;
}

updateButtonClass() {
  const button = document.querySelector('button');
  button.classList.add('info');
}

private _applyKeyValueChanges(changes: KeyValueChanges<string, any>): void {
  changes.forEachAddedItem((record) => this._toggleClass(record.key, record.currentValue));
  changes.forEachChangedItem((record) => this._toggleClass(record.key, record.currentValue));
  changes.forEachRemovedItem((record) => {
    if (record.previousValue) {
      this._toggleClass(record.key, false);
    }
  });
}
 
private _applyIterableChanges(changes: IterableChanges<string>): void {
  changes.forEachAddedItem((record) => {
    if (typeof record.item === 'string') {
      this._toggleClass(record.item, true);
    } else {
      throw new Error(
          `NgClass can only toggle CSS classes expressed as strings, got ${stringify(record.item)}`);
    }
  });
 
  changes.forEachRemovedItem((record) => this._toggleClass(record.item, false));
}

private _toggleClass(klass: string, enabled: boolean): void {
  klass = klass.trim();
  if (klass) {
    klass.split(/s+/g).forEach(klass => {
      if (enabled) {
        this._renderer.addClass(this._ngEl.nativeElement, klass);
      } else {
        this._renderer.removeClass(this._ngEl.nativeElement, klass);
      }
    });
  }
}

export class PictureEditorComponent implements OnInit {
 
  styler = {
    [WIDTH]: "250", // Use constants
    "max-width.px": "600", // Hard-Coding
    "min-width.px": "200",
    "filter": "sepia(0)"
  }
 
  updateSize(val) {
    this.styler[WIDTH] = val;
  }
 
  updateSepia(val) {
    this.styler['filter'] = `sepia(${val})`;
  }
 
}
<div>
  <img src="https://wallpapercave.com/wp/wp1959334.png"
     alt="MOB"
     [ngStyle]="styler">
</div>
 
<!-- ...size -->
 
<div>
  <input #sepia type="range" id="sepia" name="sepia" 
         min="0" max="1" value="0" step="0.1"
         (input)="updateSepia(sepia.value)">
  <label for="sepia">Sepia</label>
</div>

private _applyChanges(changes: KeyValueChanges<string, string|number>): void {
  changes.forEachRemovedItem((record) => this._setStyle(record.key, null));
  changes.forEachAddedItem((record) => this._setStyle(record.key, record.currentValue));
  changes.forEachChangedItem((record) => this._setStyle(record.key, record.currentValue));
}
 
private _setStyle(nameAndUnit: string, value: string|number|null|undefined): void {
  const [name, unit] = nameAndUnit.split('.');
  value = value != null && unit ? `${value}${unit}` : value;
 
  if (value != null) {
    this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
  } else {
    this._renderer.removeStyle(this._ngEl.nativeElement, name);
  }
}