Nome de classe dinâmico dentro de ngClass no angular 2

Preciso interpolar um valor dentro de uma ngClassexpressão, mas não consigo fazer funcionar.

Tentei essas soluções que são as únicas que fazem sentido para mim, essas duas falham com a interpolação:

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

Este funciona com a interpolação, mas falha com a classe adicionada dinamicamente porque toda a string é adicionada como uma classe:

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

Então, minha pergunta é como você usa nomes de classe dinâmicos ngClassassim?

Experimentar

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

em vez de.

ou

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

ou mesmo

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

funcionará, mas o benefício extra de usar ngClass é que ele não sobrescreve outras classes que são adicionadas por qualquer outro método (por exemplo: [class.xyz]diretiva ou classatributo, etc.) como classfaz.

Atualização do Angular 9

O novo compilador, Ivy, traz mais clareza e previsibilidade ao que acontece quando existem diferentes tipos de vinculações de classes no mesmo elemento. Leia mais sobre isso aqui.

ngClass leva três tipos de entrada

• Objeto: cada chave corresponde a um nome de classe CSS, você não pode ter chaves dinâmicas, pois key 'key' "key"são todas iguais, e [key]não é compatível com AFAIK.
• Matriz: pode conter apenas uma lista de classes, sem condições, embora o operador ternário funcione
• String / expressão: assim como atributo de classe normal

Este deve funcionar

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

mas o Angular usa essa sintaxe. Eu consideraria isso um bug. Veja também https://stackoverflow.com/a/36024066/217408

Os outros são inválidos. Você não pode usar []junto com {{}}. Um ou outro. {{}}vincula o resultado stringified que não leva ao resultado desejado neste caso porque um objeto precisa ser passado para ngClass.

Exemplo de êmbolo

Como solução alternativa, a sintaxe mostrada por @A_Sing ou

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

pode ser usado.

Aqui está um exemplo de algo que estou fazendo para várias classes com várias condições :

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

onde:
classesé um objeto que contém strings de vários nomes de classe. por exemploclass.icon.large = "app__icon--large"

É dinâmico! Atualiza conforme as condições são atualizadas.

quero mencionar alguns pontos importantes a serem mantidos em mente ao implementar a associação de classe.

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

a classe aqui não é vinculativa corretamente porque uma condição deve ser atendida, enquanto você tem duas classes idênticas 'badge-warning' que podem ter duas condições diferentes. Para corrigir isso

 [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>

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