0

estoy intentado combinar en un ngClass una expresion + una función sin embargo la expresión no se esta evaluando y no se ejecuta la clase, actualmente lo tengo así, es solo un ejemplo:

<div [ngClass]="[cargar(), {'hola':true}]"></div>

cargar() {
    return 'hola2';
  }

por lo que solo me esta aplicando la clase que trae cargar(), y hola no se esta aplicando aun sabiendo que la evaluo como verdad

aqui el ejemplo

https://stackblitz.com/edit/angular-t35zo1

1 respuesta 1

1

Por lo que veo en la documentación oficial de angular, en el atributo ngClass, solo se pueden colocar expresiones. puedes colocar string, arreglos u objetos. por tanto una función no es bien recibida.

No veo que permita combinar ambas maneras como lo haces, he intentado ejecutarlo y no lo permite, debes realizarlo de una u otra forma.

te dejo el link de la documentación oficial de angular https://angular.io/api/common/NgClass

Si lo que deseas es que se aplique una clase u otra según te parezca, una de las formas podría ser de la siguiente manera:

Tengo en mi css el las siguientes clases:

export class AttrNgClass implements OnInit {

  public changeBackground: boolean;

  constructor() { }

  public ngOnInit(): void {
    this.changeBackground = false;
   }

  public backGround(): void {
    this.changeBackground = !this.changeBackground;
  }

  backGround2() {
    return 'bg-dark-gray';
  }
}
.text-blue {
    color: blue;
}

.bg-aqua {
    background-color: aqua !important;
}

.bg-dark-gray {
    background-color: darkgray;
}
<div (click)="backGround()"
    [ngClass]="{'text-blue': true, 'bg-aqua': !changeBackground, 'bg-dark-gray': changeBackground}">
    Prueba de cambio de color
</div>

<div [ngClass]="[backGround2()]">
    otra prueba
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.