Angular 8 boot up (3), class Binding, style Binding

Angular 8 boot up (3), class Binding, style Binding

https://github.com/jalbertomr/Angular8Bootup.git

 class Binding

mi-componente.component.ts
...
@Component({
  selector: '[app-mi-componente]',
  template: `
      <div><h1> class Binding</h1><br>
          <h2 class="text-success">Aplicando class class="text-success"</h2>
          <h2 [class]="miClassProperty">Aplicando class binding [class]="miClassProperty"</h2>
          <h2 class="text-danger" [class]="miClassProperty">Aplicando class y [class], solo [class] aplica</h2>
          <h2 [class.text-danger]="miBooleanProperty">Aplicando [class.text-danger]="miBooleanProperty"</h2>
          <h2 [ngClass]="miPropertyVariasClasses">Aplicando [ngClass]="miPropertyVariasClasses"</h2></div>`,
  styles: [`    .text-success {
      color: green;
  }

  .text-danger {
      color: red;
  }

  .text-special {
      font-style: italic;
  }  `]
})
export class MiComponenteComponent implements OnInit {
  public miClassProperty = "text-special";
  public miBooleanProperty = true;
  public hasError = true;
  public isSpecial = true;
  public miPropertyVariasClasses = {
    "text-success": !this.hasError,
    "text-danger": this.hasError,
    "text-special": this.isSpecial
  }

  constructor() {
  }

  ngOnInit() {
  }

 style Binding

mi-componente.component.ts
...
@Component({selector: '[app-mi-componente]',
  template: `
      <div><h1> style Binding</h1><br>
          <h2 [style.color]="'orange'">Aplicando [style.color]="'orange'"</h2>
          <h3>miBooleanProperty = {{miBooleanProperty}}</h3>
          <h2 [style.color]="miBooleanProperty ? 'green' : 'red'">Aplicando [style.color]="miBooleanProperty ? 'green' :
              'red'"</h2>
          <h3>miColorProperty = {{miColorProperty}}</h3>
          <h2 [style.color]="miColorProperty">Aplicando [style.color]="miColorProperty"</h2>
          <h3>miPropertyVariosStyles = {{miPropertyVariosStyles.color}},{{miPropertyVariosStyles.fontStyle}}</h3>
          <h2 [ngStyle]="miPropertyVariosStyles">Aplicando [ngStyle]="miPropertyVariosStyles"</h2>
          <button (click)="Cambia()"><h2>Cambia property values -> styles</h2></button>
      </div>`,
  styles: []
})
export class MiComponenteComponent implements OnInit {
  public miColorProperty = "blue";
  public miBooleanProperty = true;
  public miPropertyVariosStyles = {color: this.miColorProperty, fontStyle: "italic"};

  constructor() {
  }

  ngOnInit() {
  }

  metodoA() {
    return "valor regresado x metodoA.";
  }

  Cambia() {
    this.miBooleanProperty = !this.miBooleanProperty;
    if (this.miColorProperty == 'blue') this.miColorProperty = 'orange'; else this.miColorProperty = 'blue';
    (this.miPropertyVariosStyles.fontStyle == 'italic') ? this.miPropertyVariosStyles.fontStyle = 'normal' : this.miPropertyVariosStyles.fontStyle = 'italic';
  }...

This is the init page.

 And this after apply change on the properties of the miComponente class that binds to the styles on the template.

eot