Learn how to add and remove classes.
- [Instructor] In Angular, class binding…allows you to add or remove CSS classes…from an elements class attribute…based on component logic.…The syntax for defining a class binding…on an HTML element starts off by…wrapping class within optional class name,…and binding it to some property.…If the template expression evaluates to true,…it will display the class.…So let's give it a try in our own project.…Let's go ahead and remove everything from our template.…And we'll also remove everything here…in our app component class.…
So in our template, what we want to do…is write in a paragraph tag,…and we'll wrap in brackets, class,…and we'll designate a class name of danger,…and we'll bind it to a function called alertStatus…and we'll pass in danger, class binding example.…
And let's also change styleURLs to styles,…and this will let us write inline CSS.…We'll get rid of everything inside of here,…and we'll add back ticks,…and we'll add a danger class…with a color of red and a font weight of bold.…Next let's create the alert status method.…
- 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.