Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating nice-looking, adorable and successful user interfaces. In this course we will take a deep dive into the various possibilities Angular offers for styling components. We learn about the different APIs, how they allow us to conditionally apply one or multiple styles in the form of style attributes and CSS classes. We also explore the concept of style encapsulation and how it helps prevent our styles from leaking into other components.
Overview
Syllabus
- Add styles to a component in Angular
- Style HTML elements in Angular using the style property
- Conditionally add a single CSS class to a DOM element in Angular
- Style HTML elements in Angular using ngClass
- Style HTML elements in Angular using ngStyle
- Use Angular style sanitization to mark dynamic styles as trusted values
- Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- Use :host-context and the ::ng-deep selector to apply context-based styling
- Use the Renderer2 to add styles to an element in Angular
Taught by
Juri Strumpflohner
