Learn how to set inline styles with style binding.
- [Instructor] Style binding is very similar…to class binding, but instead of targeting…the class attribute, styles are applied…to the style attribute.…To define style binding for a single CSS property,…you wrap stype in brackets…and bind it to an expression.…For sending multiple CSS properties,…you can use the ngStyle directive…and bind the property values to an object.…In the previous clip we were using ngClass…to add or remove classes.…Let's try doing the same thing…except for adding or removing multiple styles.…
So let's change ngClass to ngStyle…and also myClasses to ngStyles…and we'll change this to Style binging example.…We don't need any of these CSS classes here…so we can remove them.…As well as any of this code down here.…So now let's create the ngStyles object.…
And for the first property,…it'll be a CSS property of color.…Set to red and font-weight…set to bold.…Let's save it and that's how you use style binding…to control multiple styles.…Now if you wish to add or remove a single CSS property,…we don't have to use the ngStyle directive.…
- How components work
- Defining HTML templates
- Defining CSS
- Class binding and style binding
- Property binding and event binding
- Creating routes for navigation
Skill Level Intermediate
1. Getting Up and Running with Angular
2. Templating Basics
3. Data Binding
5. Tying It All Together
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.