Say "Hello World" to Angular 2

Create a Simple Angular 2 Component

Manage Angular 2 Elements with Events and Refs

Control Angular 2 Events with $event and Event Handlers

Share Services and Data with Angular 2 Dependency Injection

Provide and Share Values with Angular 2 Dependency Injection

Loop Through Angular 2 Components with ngFor

Pass Values into Angular 2 Components with @Input

Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

Pass Events from Angular 2 Components with @Output

Write CSS Inside of Angular 2 Components

Apply CSS Classes Conditionally with Angular 2’s ngClass

Use Global CSS Inside Angular 2 Components

Get Started with Angular

`ngClass` is Angular 2's way of allowing you to apply classes and styles based on what's happening in your component. While CSS covers many scenarios with pseudo classes, you'll often run into scenarios where you need to apply classes based on certain conditions, so `ngClass` comes to the rescue.

[00:02] While CSS has focus, active, and other things that would handle most of the Events on the dom, there are some more complex scenarios. We're going to handle those with ngClass, to conditionally apply Classes. The syntax for that is ngClass, wrapped into square brackets because we're going to evaluate the right side of this.

[00:21] Remember if you don't put the square brackets in, it just treats this as a string. We're going to evaluate this side. We're going to pass in an object, where the key is a name of a Class. We're going to call this Class mousedown, and on mousedown we're going to set the border to pixels solid green.

[00:43] That means in our ngClass, that the left-hand side or key of this is going to be called mousedown, because this Class relates to this. The right-hand side of this, so the value of this object, is going to be a true or false statement based on whether or not we want to apply this Class.

[01:02] We're going to make a property called isMousedown, and then in our events...First, I'll put an isMousedown here, then in our events we can say mousedown isMousedown true, mouseup isMousedown false. Also let's get a mouseleave isMousedown false.

[01:24] When I come in here, I bring my mouse into an input and I click the mousedown, you'll see that green border. I pull the mouse up, and you'll see that border leaves. I can add that Class and remove that Class based on whether the mouse is down, or if I leave out with the mouse still down the Class is removed.

[01:47] You can handle these complex stateful scenarios that you wouldn't usually have a Class for, or a pseudo Class for, to define the style, instead create a bully in to track something, and whether or not you want that style applied. Any interaction you want to define, whether it's from Events, or from timers, or things like that, you can add and remove Classes using ngClass.

Course

Get Started with Angular

Apply CSS Classes Conditionally with Angular 2’s ngClass

Share this video with your friends