Angular: clase condicional con * ngClass

¿Qué pasa con mi código angular? Estoy obteniendo:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... 

HTML

  

[ngClass]=... lugar de *ngClass .

* es solo para la syntax abreviada de directivas estructurales donde puede, por ejemplo, usar

 
{{item}}

en lugar de la versión equivalente más larga

  

Ver también https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

 ... ... ... ... ... 

Ver también https://angular.io/docs/ts/latest/guide/template-syntax.html

  
The class binding is special
This one is not so special
  
Bad curly

Angular 2 proporciona alguna forma de agregar clase con la condición

hay diferentes tipos:

tipo uno

 [class.my-class]="step=='step1'" 

tipo dos

 [ngClass]="{'my-class': step=='step1'}" 

tipo tres

 [ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]" 

tipo cuatro

 [ngClass]="(step=='step1')?'my-class1':'my-class2'" 

Otra solución sería usar [class.active] .

Ejemplo:

  

Esa es la estructura normal para ngClass es:

 [ngClass]="{'classname' : condition}" 

Entonces en tu caso, solo úsalo así …

  

Puede usar ngClass para aplicar el nombre de 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 de método

 [ngClass]="getSomeClass()" 

Este método estará dentro de tu componente

  getSomeClass(){ const isValid=this.property1 && this.property2; return {someClass1:isValid , someClass2:isValid}; } 

con los siguientes ejemplos puede usar IF ELSE

 

Deberías usar algo ( [ngClass] lugar de *ngClass ) así:

  

Mientras creaba una forma reactiva, tuve que asignar 2 tipos de clase en el botón. Así es como lo hice:

  

Cuando el formulario es válido, el botón tiene btn y btn-class (de bootstrap); de lo contrario, solo btn class.

extender a Mostafa Mashayekhi 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' }" 

También * ngIf se puede usar en algunas de estas situaciones generalmente combinado con un * ngFor

 class="mats p" *ngIf="mat=='painted'" 

Esto es lo que funcionó para mí [ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"