В ngStyle vs ngClass, почему ngStyle не работает без квадратных скобок, а ngClass работает?

Question

Я пытался понять разницу между односторонним связыванием и интерполяцией и обнаружил, что для ngClass эти два значения эквивалентны, но для ngStyle я не смог заставить его работать с использованием интерполяции ( работал только Binding). Пожалуйста, смотрите следующий StackBlitz: https://angular -a6cvfb.stackblitz.io для живого примера.

Ни один из синтаксисов ngStyle ниже, которые были закомментированы, не работал для меня. Я что-то пропустил? Большое спасибо!

{Примечание: все, что закомментировано, должно быть таким, иначе это нарушит код}.

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>
            <button style="background-color: yellow">Button</button> <br/><br/>
            -- ANGULAR DIRECTIVES -- <br/>
            <label>Foo:</label>
            <input value="Foo" [ngClass]="styleClass"/>

            <label>Bar:</label>
            <input value="Bar" [ngStyle]="styleObj" />

            <label>Foo:</label>
            <input value="Foo" ngClass="{{styleClass}}"/> <br/>

            <!--label>Bar:</label> 
            <input value="Bar" ngStyle="{{styleObj}}" />

            <label>Bar:</label> 
            <input value="Bar" ngStyle="{{styleStr}}" />

            <label>Bar:</label> 
            <input value="Bar" ngStyle="{'visibility': 'hidden'}" /--><br/>
<br/><br/>
            -- WITHOUT ANGULAR DIRECTIVES -- <br/>
            <label>Bazz:</label>
            <input value="Bazz" class="{{styleClass}}" />

            <!--label>Bazz:</label>
            <input value="Bazz" style="{{styleStr}}" />

            <label>Bazz:</label>
            <input value="Bazz" style="{{styleObj}}" /-->            

            <label>Buzz:</label>
            <input value="Buzz" style="visibility: hidden" />
            `,
  styles: [`h1 { font-family: Lato; }
            .hide{visibility:hidden}`]
})
export class HelloComponent  {
  @Input() name: string;
  styleClass: string = "hide";
  styleObj={'visibility': 'hidden', 'width': '60%'};
  styleStr="'visibility': 'hidden'";

}