Ole Ersoy

Image by Brian Martin from Pixabay

Scenario

The Angular Component Testing Scenarios ComponentBanner binds the title property dynamically to an h1 element within the template.

@Component({
selector: 'app-banner',
template: '<h1>{{title}}</h1>',
styles: ['h1 { color: green; font-size: 350%}'],
})
export class BannerComponent {
title = 'Test Tour of Heroes';
}

And we want to verify that the title

--

--

Image by Antonio López from Pixabay

Scenario

We have a Todo interface.

interface Todo { 
title: string;
description: string;
completed: boolean;
createdAt: number;
}

And we also want to create a TodoPreview interface containing only the following properties.

interface TodoPreview { 
title: string;
completed: boolean;
}

In other words it omits the description and createdAtproperties from the…

--

--

Image by Gleb Korovko from Pixabay

Scenario

Within our app component we wish to add a onValid CSS class whenever the _valid property on the component is true.

Approach

Within styles.css create the onValid CSS class.

.onValid {
color: aqua;
}

Decorate a isValid() getter with @HostBinding that will add the onValid CSS class to the component whenever the _valid property is true.

@HostBinding('class.onValid')
get isValid() {
return this._valid;
}
private _valid = true;

Demo

--

--