Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

138
Visualizações
Angular 2 agrega múltiples clases a través del enlace [class.className]

Si bien agregar una sola clase funciona muy bien de esta manera:

[class.loading-state]="loading"

Pero, ¿cómo agrego varias clases Ex si loading es true agregar clase - "loading-state" & "my-class"

¿Cómo lo hago a través del [class] binding

about 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

Puede hacer esto simplemente usando ngClass :

Aquí primero, segundo y tercero son el nombre de las clases.

Y en lugar de verdadero/falso, puede poner directamente sus condiciones allí

 <div [ngClass]="{'first': true, 'second': true, 'third': false}">...</div>

En tu caso

 <div [ngClass]="{'loading-state': loading, 'my-class': loading }">...</div>

O Veriosn más corto (como comentó @matko.kvesic)

 <div [ngClass]="{'loading-state my-class': loading}">...</div>
about 4 years ago · Santiago Trujillo Relatório

0

Aunque la respuesta de Vivek Doshi es totalmente correcta, a continuación pongo otras alternativas para hacer lo mismo con distintas variables booleanas:

Primera solución: [clase.className]

Modelo:

 <div [class.first-class]="addFirst" [class.second-class]="addSecond">...</div>

Componente:

 export class MyComponent { ... addFirst: boolean; addSecond: boolean; ... }

Segunda solución: [ngClass] con enlace de método

Modelo:

 <div [ngClass]="setClasses()">...</div>

Componente:

 export class MyComponent { ... addFirst: boolean; addSecond: boolean; ... setClasses() { return { 'first-class': this.addFirst, 'second-class': this.addSecond }; } ... }

Última solución, pero no menos importante:

Modelo:

 <div [ngClass]="{'first-class': addFirst, 'second-class': addSecond}">...</div>

Componente:

 export class MyComponent { ... addFirst: boolean; addSecond: boolean; ... }
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda