classe ng em Angular2
em Angular 1 pode-se fazer:
// model
$scope.myClasses = ['class1', 'class2', ...];
// view
... ng-class="myClasses" ...
em Angular 2, tudo o que tenho sido capaz de fazer até agora é:
// view
... [class.class1]="true" [class.class2]="true" ...
// model
class ... {
private myClasses: any;
constructor() {
this.myClasses = ['class1', 'class2', ...];
}
// view
... [class]="myClasses" ...
mas isto não funciona, eu tentei myClasses como um nome de cadeia de uma única classe, matriz de strings, object with a classname key and true as a value, an array of objects of this kind, but tristemente, nothing of listed will work this way.
5 answers
Você deve especificar CSSClass no directives propriedade de @View decorador. Olha para isto plunk .
@Component({
selector: 'app',
})
@View({
template: '<div [class]="classMap">Class Map</div>',
directives: [CSSClass]
})
class App {
constructor() {
this.classMap = { 'class1': true, 'class2': false };
setInterval(() => {
this.classMap.class2 = !this.classMap.class2;
}, 1000)
}
}
UPD
CSSClass foi renomeado para NgClass em alfa-35. Veja Este pedaço
@Component({
selector: 'app',
})
@View({
directives: [NgClass],
template: `
<div [ng-class]="classMap">Class Map</div>
`,
})
class App { /* ... */ }
De acordo com o NgClass API docs, o Angular 2 irá aceitar uma cadeia de caracteres, um Array ou um objecto/mapa como expressão para a NgClass. Ou, claro, você pode especificar uma função que retorna um desses.
import {Component, CORE_DIRECTIVES} from 'angular2/angular2'
@Component({
selector: 'my-app',
directives: [CORE_DIRECTIVES],
template: `
<div>
<h2>{{title}}</h2>
<div ngClass="gray-border purple">string of classes</div>
<div [ngClass]="'gray-border purple'">string of classes</div>
<div [ngClass]="['gray-border', 'green']">array of classes</div>
<div [ngClass]="{'gray-border': true, 'blue': true}">object/map of classes</div>
<button [ngClass]="{active: isActive}" (click)="isActive = !isActive">Click me</button>
</div>
`,
styles: [`
.gray-border { border: 1px solid gray; }
.blue { color: blue; }
.green { color: green; }
.purple { color: purple; }
.active { background-color: #f55; }
`]
})
export class App {
title = "Angular 2 - NgClass";
isActive = false;
}
Se você está passando uma cadeia literal, observe os dois sintaxes alternativos:
<div ngClass="gray-border purple">string of classes</div>
<div [ngClass]="'gray-border purple'">string of classes</div>
E citando os documentos:
Enquanto a NgClass a directiva pode interpretar expressões que avaliam string, Array or Object, the Object-based version is the most often usado e tem a vantagem de manter todos os nomes de classe CSS em um modelo.
Mais um método [Utilizando um operador ternário e interpolação]
(Altough Mark Rajcok} declarou Todos os métodos possíveis ngClass, mas pode juntá - los com ternary operator e obter else condções) {[[13]}
Modelo
<div class="hard-coded-class {{classCondition ? 'c1 c2': 'c3 c4'}}">
Conditional classes using <b>Ternary Operator</b>
</div>
ou use ternary operator com ngClass, veja como
TS
export class App {
this.classCondition = false;
}
<div class="hard-coded-class c3 c4">
Conditional classes using <b>Ternary Operator</b>
</div>
Usando o typescript e Angular 2 beta, a ngClass não parece funcionar. A partir de seguir a antevisão da API - https://angular.io/docs/ts/latest/api/common/NgClass-directive.html
template: '<div [ngClass]="classMap">Class Map</div>'
O exemplo do Google fornece duas versões de código (que eu assumo ser Alfa e atualizado para Beta). A nova sintaxe no exemplo do site não parece funcionar... alguma ideia?
@View({
template: `
<div class="container questions">
<div class="row formSection">
<h2>
<div [ngClass]="completed">completed</div>
</h2>
<questionSection></questionSection>
</div>
</div>
`,
directives: [NgClass, QuestionSection],
})
Eu estava tentando fazer algo semelhante, eu tinha uma lista de itens de menu e queria especificar uma classe fontawesome para cada item. Foi assim que fiz com que funcionasse. No meu componente de escrita tinha isto:
export class AppCmp {
menuItems = [
{
text: 'Editor',
icon: 'fa fa-pencil'
},
{
text: 'Account',
icon: 'fa fa-user'
},
{
text: 'Catalog',
icon: 'fa fa-list'
}
]
}
Então no meu html:
<div *ngFor="#item of menuItems; #index = index">
<i [attr.class]="item.icon"></i>
<span>{{ item.text }}</span>
</div>