Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit cf3ce17

Browse files
committed
docs(kebab-case.md): more fixes and CSS migration instructions
Closes #5773
1 parent 06d076a commit cf3ce17

File tree

1 file changed

+52
-2
lines changed

1 file changed

+52
-2
lines changed

modules/angular2/docs/migration/kebab-case.md

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ Take the following steps to upgrade your directives and components:
9595
```
9696

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

@@ -149,6 +149,7 @@ Take the following steps to upgrade your directives and components:
149149
'[some-prop]': 'exp',
150150
'[style.background-color]': 'exp',
151151
'[class.some-class]': 'exp',
152+
'[attr.some-attr]': 'exp',
152153
'(some-event)': 'action()',
153154
'some-attr': 'value'
154155
}
@@ -163,14 +164,15 @@ Take the following steps to upgrade your directives and components:
163164
'[someProp]': 'exp',
164165
'[style.background-color]': 'exp',
165166
'[class.some-class]': 'exp',
167+
'[attr.some-attr]': 'exp',
166168
'(someEvent)': 'action()',
167169
'some-attr': 'value'
168170
}
169171
})
170172
```
171173

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

175177
5. Update export name
176178

@@ -187,3 +189,51 @@ Take the following steps to upgrade your directives and components:
187189
exportAs: 'someName'
188190
})
189191
```
192+
193+
194+
# CSS
195+
196+
As the attribute names from your templates have been updated from dash to camel case, you should also reflect the changes
197+
in your stylesheets.
198+
199+
The attributes that need to be updated are the ones used in the selector and the inputs of your directives.
200+
201+
Before:
202+
203+
```
204+
// Directive
205+
@Directive({
206+
selector: '[my-dir]',
207+
inputs: ['someProp: some-input'],
208+
})
209+
210+
<!-- template -->
211+
<div my-dir some-input="some value" not-an-input></div>
212+
213+
/* css */
214+
[my-dir] { ... }
215+
[some-input] { ... }
216+
[not-an-input] { ... }
217+
```
218+
219+
After:
220+
221+
```
222+
// Directive
223+
@Directive({
224+
selector: '[myDir]',
225+
inputs: ['someProp: someInput'],
226+
})
227+
228+
<!-- template -->
229+
<div myDir someInput="some value" not-an-input></div>
230+
231+
/* css */
232+
[myDir] { ... }
233+
[someInput] { ... }
234+
[not-an-input] { ... }
235+
```
236+
237+
Notes:
238+
- `not-an-input` is not used in a selector nor it is an input of a directive, it need not be camel cased,
239+
- CSS selectors are case insensitive you can use `[myDir]`, `[mydir]` or any other casing.

0 commit comments

Comments
 (0)