Host directives are a great way to compose reusable behavior in Angular, but they had one frustrating edge case: two directives could not safely reuse the same shared host directive on the same element. In this post, we'll build a copy button with tooltip behavior, press feedback, and clipboard support, then look at how Angular 22 now de-duplicates shared host directives so this kind of composition works the way you'd expect.
Applying multiple directives to components creates verbose templates and makes it easy to forget required directives. Angular's Directive Composition API lets you embed directives directly into components, creating reusable component behaviors that can't be accidentally omitted. This tutorial demonstrates how to use host directives to add functionality like auto-focus, click-outside detection, and accessibility features directly into components, reducing template complexity and improving maintainability.
Angular offers multiple ways to add styles to components, each with different use cases and trade-offs. From inline styles in the decorator to external stylesheets, from programmatic styling with Renderer2 to CSS custom properties, choosing the right approach impacts maintainability and performance. This comprehensive guide walks through every styling method available in Angular, helping you make informed decisions for your components.
Component theming in Angular requires understanding how styles cascade and how to adapt components to different contexts. This tutorial demonstrates multiple theming strategies using CSS :host and :host-context selectors, along with CSS custom properties. You'll learn how to create flexible components that adapt their appearance based on where they're used, whether in a sidebar, main content area, or different color schemes. Each approach has trade-offs that we'll explore in detail.
Styling Angular components can be tricky, especially with encapsulated styles. But :host and :host-context let you target a component’s root element and adapt styles based on its context—without global CSS hacks. In this guide, you'll learn how to apply, modify, and control styles using these selectors, making your components smarter and more flexible. Let’s dive in!