We are styling the :host element of our component and we want the host element font-weight to be bold when the active class is applied to the host element.
From the Angular SASS Documentation.
Use the function form to apply host styles conditionally by including another selector inside parentheses after…
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…
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…
Within our app component we wish to add a onValid CSS class whenever the _valid property on the component is true.
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…
When a link is adjacent to another link we want to give it a left margin of 2rem .
Use the adjacent ( + ) selector.
a + a {
margin-left: 2rem;
}
