@@ -95,7 +95,7 @@ Take the following steps to upgrade your directives and components:
95
95
```
96
96
97
97
Notes:
98
- - only the long syntax (with ":") needs not be updated,
98
+ - only the long syntax (with ":") needs to be updated,
99
99
- ` properties ` is the legacy name for ` inputs ` and should be updated in the same way - it is a good idea to replace
100
100
` properties ` with ` inputs ` at the same time as support for the former will be removed soon.
101
101
@@ -149,6 +149,7 @@ Take the following steps to upgrade your directives and components:
149
149
'[some-prop]': 'exp',
150
150
'[style.background-color]': 'exp',
151
151
'[class.some-class]': 'exp',
152
+ '[attr.some-attr]': 'exp',
152
153
'(some-event)': 'action()',
153
154
'some-attr': 'value'
154
155
}
@@ -163,14 +164,15 @@ Take the following steps to upgrade your directives and components:
163
164
'[someProp]': 'exp',
164
165
'[style.background-color]': 'exp',
165
166
'[class.some-class]': 'exp',
167
+ '[attr.some-attr]': 'exp',
166
168
'(someEvent)': 'action()',
167
169
'some-attr': 'value'
168
170
}
169
171
})
170
172
```
171
173
172
174
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).
174
176
175
177
5 . Update export name
176
178
@@ -187,3 +189,51 @@ Take the following steps to upgrade your directives and components:
187
189
exportAs: 'someName'
188
190
})
189
191
```
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