Nombre de clase dinámico dentro de ngClass en angular 2

Necesito interpolar un valor dentro de una ngClassexpresión pero no puedo hacer que funcione.

Probé estas soluciones que son las únicas que tienen sentido para mí, estas dos fallan con la interpolación:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

Este funciona con la interpolación pero falla con la clase agregada dinámicamente porque toda la cadena se agrega como una clase:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

Entonces, mi pregunta es ¿cómo se usan los nombres de clase dinámicos de ngClassesta manera?

Tratar

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

en lugar.

o

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

o incluso

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

funcionará, pero el beneficio adicional de usar ngClass es que no sobrescribe otras clases que se agregan mediante cualquier otro método (por ejemplo: [class.xyz]directiva o classatributo, etc.) como lo classhace.

Actualización de Angular 9

El nuevo compilador, Ivy, aporta más claridad y previsibilidad a lo que sucede cuando hay diferentes tipos de enlaces de clase en el mismo elemento. Lea más sobre esto aquí.

ngClass toma tres tipos de entrada

• Objeto: cada clave corresponde a un nombre de clase CSS, no puede tener claves dinámicas, porque key 'key' "key"son todas iguales y [key]no es compatible AFAIK.
• Array: solo puede contener una lista de clases, sin condiciones, aunque el operador ternario funciona
• Cadena / expresión: como atributo de clase normal

Este debería funcionar

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

pero Angular se basa en esta sintaxis. Consideraría esto un error. Consulte también https://stackoverflow.com/a/36024066/217408

Los demás no son válidos. No se puede usar []junto con {{}}. Cualquiera de los dos. {{}}enlaza el resultado en cadena, lo que no conduce al resultado deseado en este caso porque es necesario pasar un objeto ngClass.

Ejemplo de plunker

Como solución alternativa, la sintaxis mostrada por @A_Sing o

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

puede ser usado.

Aquí hay un ejemplo de algo que estoy haciendo para varias clases con múltiples condiciones :

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

donde:
classeses un objeto que contiene cadenas de varios nombres de clase. p.ejclass.icon.large = "app__icon--large"

¡Es dinámico! Actualizaciones a medida que se actualizan las condiciones.

Quiero mencionar algunos puntos importantes a tener en cuenta al implementar el enlace de clases.

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

class aquí no es vinculante correctamente porque se debe cumplir una condición, mientras que tiene dos clases idénticas 'insignia-advertencia' que pueden tener dos condiciones diferentes. Para corregir esto

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

Puedes usar <i [className]="'fa fa-' + data?.icon"> </i>