Getting ng-class to work

Question

When I test ng-class in the w3schools.com Try It page, everything works as the documentation says. When I try it in a bare-bones Angular 2 app, I get no joy.

Here are my steps. In a Terminal window:

1. ng new classTest
2. cd classTest
3. ng serve

In a text editor:
app.component.css

.red {
  color: #f00;
}

app.component.html

<h1 ng-class="{'red': true}">
  {{title}}
</h1>

Result: the text app works! appears in black, not red. I have tried a number of other variations, such as ng-class="'red'", in the w3schools.com Try It page, the text goes as red as you please.

What am I missing?

Answer 1

That's AngularJS example, syntax for NgClass directive in Angular 2 is the following:

<h1 [ngClass]="{'red': true}">
    {{title}}
</h1>

You can read more about NgClass directive here.