X Tutup
Skip to content

Change NgClass selector from [class] to [ng-class] #3498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pkozlowski-opensource wants to merge 1 commit into from
Closed

Change NgClass selector from [class] to [ng-class] #3498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion modules/angular2/directives.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {NgIf} from './src/directives/ng_if';
import {NgNonBindable} from './src/directives/ng_non_bindable';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch';

export * from './src/directives/class';
export * from './src/directives/ng_class';
export * from './src/directives/ng_for';
export * from './src/directives/ng_if';
export * from './src/directives/ng_non_bindable';
Expand Down
2 changes: 1 addition & 1 deletion modules/angular2/docs/core/01_templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Example:

<pre>
```
<div [class]="stringify(selected)">
<div [title]="stringify(selected)">
```
</pre>
</td>
Expand Down
8 changes: 4 additions & 4 deletions modules/angular2/src/directives/class.ts → modules/angular2/src/directives/ng_class.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@ import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/fa
* # Example:
*
* ```
* <div class="message" [class]="{error: errorCount > 0}">
* <div class="message" [ng-class]="{error: errorCount > 0}">
* Please check errors.
* </div>
* ```
*/
@Directive({
selector: '[class]',
selector: '[ng-class]',
lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
properties: ['rawClass: class']
properties: ['rawClass: ng-class']
Copy link
Copy Markdown
Contributor

@mhevery mhevery Aug 6, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

per our discussion yesterday this needs to bind both the class and ng-class

example: <div class="foo" ng-class="exp">

In this case we have to preserve foo so the binding should be.

properties: ['ngClass: ng-class', 'explicitClass: class' ]

We then have to merge the properties in explicitClass with that of ngClass

(You can merge this PR as is, and follow up with another PR)

})
export class CSSClass {
export class NgClass {
private _differ: any;
private _mode: string;
_rawClass;
Expand Down
2 changes: 1 addition & 1 deletion modules/angular2/src/render/dom/compiler/compile_element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export class CompileElement {
// inherited down to children if they don't have an own elementBinder
inheritedElementBinder: ElementBinderBuilder = null;
compileChildren: boolean = true;
elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of
elementDescription: string; // e.g. '<div [title]="foo">' : used to provide context in case of
// error

constructor(public element, compilationUnit: string = '') {
Expand Down
51 changes: 17 additions & 34 deletions ...es/angular2/test/directives/class_spec.ts → ...angular2/test/directives/ng_class_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import {
} from 'angular2/test_lib';
import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
import {Component, View, NgFor, bind} from 'angular2/angular2';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {CSSClass} from 'angular2/src/directives/class';
import {NgClass} from 'angular2/src/directives/ng_class';
import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';

export function main() {
Expand All @@ -27,7 +26,7 @@ export function main() {

it('should clean up when the directive is destroyed',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div *ng-for="var item of items" [class]="item"></div>';
var template = '<div *ng-for="var item of items" [ng-class]="item"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
Expand All @@ -48,7 +47,7 @@ export function main() {

it('should add classes specified in an object literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="{foo: true, bar: false}"></div>';
var template = '<div [ng-class]="{foo: true, bar: false}"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -64,7 +63,7 @@ export function main() {

it('should add classes specified in an object literal without change in class names',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="{'foo-bar': true, 'fooBar': true}"></div>`;
var template = `<div [ng-class]="{'foo-bar': true, 'fooBar': true}"></div>`;

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -79,7 +78,7 @@ export function main() {

it('should add and remove classes based on changes in object literal values',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
var template = '<div [ng-class]="{foo: condition, bar: !condition}"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -99,7 +98,7 @@ export function main() {

it('should add and remove classes based on changes to the expression object',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>';
var template = '<div [ng-class]="objExpr"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand Down Expand Up @@ -129,7 +128,7 @@ export function main() {

it('should add and remove classes based on reference changes to the expression object',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>';
var template = '<div [ng-class]="objExpr"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand Down Expand Up @@ -157,7 +156,7 @@ export function main() {

it('should add classes specified in a list literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
var template = `<div [ng-class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -172,7 +171,7 @@ export function main() {

it('should add and remove classes based on changes to the expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="arrExpr"></div>';
var template = '<div [ng-class]="arrExpr"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand Down Expand Up @@ -205,7 +204,7 @@ export function main() {

it('should add and remove classes when a reference changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="arrExpr"></div>';
var template = '<div [ng-class]="arrExpr"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -228,7 +227,7 @@ export function main() {

it('should add classes specified in a string literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="'foo bar foo-bar fooBar'"></div>`;
var template = `<div [ng-class]="'foo bar foo-bar fooBar'"></div>`;

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -243,7 +242,7 @@ export function main() {

it('should add and remove classes based on changes to the expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="strExpr"></div>';
var template = '<div [ng-class]="strExpr"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -269,7 +268,7 @@ export function main() {

it('should remove active classes when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="strExpr"></div>`;
var template = `<div [ng-class]="strExpr"></div>`;

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -290,7 +289,7 @@ export function main() {

it('should remove active classes when expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>';
var template = '<div [ng-class]="objExpr"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -313,25 +312,9 @@ export function main() {
});
}));

it('should have no effect when activated by a static class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
// TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
expect(ListWrapper.join(DOM.classList(rootTC.componentViewChildren[0].nativeElement),
' '))
.toEqual('init foo ng-binding');
async.done();
});
}));

it('should co-operate with the class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr" class="init foo"></div>';
var template = '<div [ng-class]="objExpr" class="init foo"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand All @@ -352,7 +335,7 @@ export function main() {

it('should co-operate with the class attribute and class.name binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
var template = '<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';

tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
Expand Down Expand Up @@ -383,7 +366,7 @@ export function main() {
}

@Component({selector: 'test-cmp'})
@View({directives: [CSSClass, NgFor]})
@View({directives: [NgClass, NgFor]})
class TestComponent {
condition: boolean = true;
items: any[];
Expand Down
X Tutup