javascript - multiple - Angular: clase condicional con*ngClass
ngclass angular 6 (14)
Angular 2, .., 7 proporciona varias formas de agregar clases condicionalmente:
tipo uno
[class.my-class]="step==''step1''"
tipo dos
[ngClass]="{''my-class'': step==''step1''}"
y opción múltiple:
[ngClass]="{''my-class'': step==''step1'', ''my-class2'':step==''step2'' }"
tipo tres
[ngClass]="{1:''my-class1'',2:''my-class2'',3:''my-class4''}[step]"
tipo cuatro
[ngClass]="(step==''step1'')?''my-class1'':''my-class2''"
¿Qué tiene de malo mi código angular? Estoy obteniendo:
Cannot read property ''remove'' of undefined at BrowserDomAdapter.removeClass ...
HTML
<ol class="breadcrumb">
<li *ngClass="{active: step===''step1''}" (click)="step=''step1; ''">Step1</li>
<li *ngClass="{active: step===''step2''}" (click)="step=''step2''">Step2</li>
<li *ngClass="{active: step===''step3''}" (click)="step=''step3''">Step3</li>
</ol>
Debería usar algo (
[ngClass]
lugar de
*ngClass
) así:
<ol class="breadcrumb">
<li [ngClass]="{active: step===''step1''}" (click)="step=''step1; ''">Step1</li>
(...)
Deje que YourCondition sea su condición o una propiedad booleana, luego haga esto
<ol class="breadcrumb">
<li [ngClass]="{''active'': step===''step1''}" (click)="step=''step1''">Step1</li>
<li [ngClass]="{''active'': step===''step2''}" (click)="step=''step2''">Step2</li>
<li [ngClass]="{''active'': step===''step3''}" (click)="step=''step3''">Step3</li>
</ol>
En
Angular 7.X
Las clases CSS se actualizan de la siguiente manera, según el tipo de evaluación de expresión:
-
cadena: se añaden las clases CSS enumeradas en la cadena (espacio delimitado)
-
Matriz: se añaden las clases CSS declaradas como elementos de matriz
-
Las claves de objeto son clases CSS que se agregan cuando la expresión dada en el valor se evalúa como un valor verdadero, de lo contrario se eliminan.
<some-element [ngClass]="''first second''">...</some-element>
<some-element [ngClass]="[''first'', ''second'']">...</some-element>
<some-element [ngClass]="{''first'': true, ''second'': true, ''third'': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{''class1 class2 class3'' : true}">...</some-element>
Esa es la estructura normal para
ngClass
es:
[ngClass]="{''classname'' : condition}"
Entonces, en su caso, simplemente utilícelo así ...
<ol class="breadcrumb">
<li [ngClass]="{''active'': step===''step1''}" (click)="step=''step1''">Step1</li>
<li [ngClass]="{''active'': step===''step2''}" (click)="step=''step2''">Step2</li>
<li [ngClass]="{''active'': step===''step3''}" (click)="step=''step3''">Step3</li>
</ol>
Esto es lo que funcionó para mí:
[ngClass]="{''classname'' : conditionFlag}"
Mientras creaba una forma reactiva, tuve que asignar 2 tipos de clase en el botón. Así es como lo hice:
<button type="submit" class="btn" [ngClass]="(formGroup.valid)?''btn-info'':''''"
[disabled]="!formGroup.valid">Sign in</button>
Cuando el formulario es válido, el botón tiene btn y btn-class (de bootstrap), de lo contrario solo btn class.
No es relevante con la directiva
[ngClass]
pero también recibí el mismo error que
No se puede leer la propiedad ''eliminar'' de indefinido en ...
y pensé que era el error en mi
[ngClass]
pero resultó que la propiedad a la que intentaba acceder en la condición de
[ngClass]
no se inicializó.
Como si tuviera esto en mi archivo mecanografiado
element: {type: string};
y en mi
[ngClass]
estaba usando
[ngClass]="{''active'', element.type === ''active''}"
y estaba recibiendo el error
No se puede leer la propiedad ''tipo'' de undefined en ...
y la solución fue arreglar mi propiedad a
element: {type: string} = {type: ''active''};
Espero que ayude a alguien que está tratando de igualar una condición de una propiedad en
[ngClass]
Otra solución sería usar
[class.active]
.
Ejemplo:
<ol class="breadcrumb">
<li [class.active]="step==''step1''" (click)="step=''step1''">Step1</li>
</ol>
Puede usar ngClass para aplicar el nombre de la clase condicionalmente y no en Angular
Por ejemplo
[ngClass]="''someClass''">
Condicional
[ngClass]="{''someClass'': property1.isValid}">
Condición Múltiple
[ngClass]="{''someClass'': property1.isValid && property2.isValid}">
Expresión del método
[ngClass]="getSomeClass()"
Este método estará dentro de su componente
getSomeClass(){
const isValid=this.property1 && this.property2;
return {someClass1:isValid , someClass2:isValid};
}
Sintaxis de
ngClass
:
[ngClass]="{''active'': dashboardComponent.selected_menu == ''profile''}"
Puedes usar así:
[class.yourClass]="YourCondition"
con los siguientes ejemplos puede usar ''IF ELSE''
<p class="{{condition ? ''checkedClass'' : ''uncheckedClass''}}">
<p [ngClass]="condition ? ''checkedClass'' : ''uncheckedClass''">
<p [ngClass]="[condition ? ''checkedClass'' : ''uncheckedClass'']">
para extender MostafaMashayekhi su respuesta para la opción dos> también puede encadenar múltiples opciones con un '',''
[ngClass]="{''my-class'': step==''step1'', ''my-class2'':step==''step2'' }"
Además, * ngIf se puede usar en algunas de estas situaciones, generalmente combinado con un * ngFor
class="mats p" *ngIf="mat==''painted''"
[ngClass]=...
lugar de
*ngClass
.
*
es solo para la sintaxis abreviada de directivas estructurales donde puede, por ejemplo, usar
<div *ngFor="let item of items">{{item}}</div>
en lugar de la versión equivalente más larga
<template ngFor let-item [ngForOf]="items">
<div>{{item}}</div>
</template>
Ver también https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
<some-element [ngClass]="''first second''">...</some-element> <some-element [ngClass]="[''first'', ''second'']">...</some-element> <some-element [ngClass]="{''first'': true, ''second'': true, ''third'': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-element [ngClass]="{''class1 class2 class3'' : true}">...</some-element>
Ver también https://angular.io/docs/ts/latest/guide/template-syntax.html
<!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> <div class="special" [class.special]="!isSpecial">This one is not so special</div>
<!-- reset/override all class names with a binding --> <div class="bad curly special" [class]="badCurly">Bad curly</div>