Skip to content
Closed
Changes from all commits
Commits
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
47 changes: 45 additions & 2 deletions modules/angular2/docs/migration/kebab-case.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ The previous decorator becomes:
@Directive({inputs: ['myProp', 'myOtherProp: myAttrName']})

Notes:
- only the long syntax (with ":") needs not be updated,
- only the long syntax (with ":") needs to be updated,
- `properties` is the legacy name for `inputs` and should be updated in the same way - it is a good idea to replace
`properties` with `inputs` at the same time as support for the former will be removed soon.

Expand Down Expand Up @@ -127,6 +127,7 @@ should be changed to
'[some-prop]': 'exp',
'[style.background-color]': 'exp',
'[class.some-class]': 'exp',
'[attr.some-attr]': 'exp',
'(some-event)': 'action()',
'some-attr': 'value'
}
Expand All @@ -139,13 +140,14 @@ should be changed to:
'[someProp]': 'exp',
'[style.background-color]': 'exp',
'[class.some-class]': 'exp',
'[attr.some-attr]': 'exp',
'(someEvent)': 'action()',
'some-attr': 'value'
}
})

The property bindings (`[...]`) and event bindings (`(...)`) must be updated in the same way as they are updated in a
template (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).
template - ie converted to camel case (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).

5. Update export name

Expand All @@ -159,4 +161,45 @@ should be changed to
exportAs: 'someName'
})

# CSS

As the attribute names from your templates have been updated from dash to camel case, you should also reflect the changes
in your stylesheets.

The attributes that need to be updated are the ones used in the selector and the inputs of your directives.

Before:

// Directive
@Directive({
selector: '[my-dir]',
inputs: ['someProp: some-input'],
})

<!-- template -->
<div my-dir some-input="some value" not-an-input></div>

/* css */
[my-dir] { ... }
[some-input] { ... }
[not-an-input] { ... }

After:

// Directive
@Directive({
selector: '[myDir]',
inputs: ['someProp: someInput'],
})

<!-- template -->
<div myDir someInput="some value" not-an-input></div>

/* css */
[myDir] { ... }
[someInput] { ... }
[not-an-input] { ... }

Notes:
- `not-an-input` is not used in a selector nor it is an input of a directive, it need not be camel cased,
- CSS selectors are case insensitive you can use `[myDir]`, `[mydir]` or any other casing.