Скачать или смотреть How to Apply Different Styles to a Common Component Instance in Angular

Learn how to customize styles in Angular for shared components using Input decorators and dynamic class binding with ngClass.
---
This video is based on the question https://stackoverflow.com/q/73555581/ asked by the user 'Abhinav Akhil' ( https://stackoverflow.com/u/10236367/ ) and on the answer https://stackoverflow.com/a/73555819/ provided by the user 'HassanMoin' ( https://stackoverflow.com/u/12251558/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to have different styles for common componnent instance in Angular?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Apply Different Styles to a Common Component Instance in Angular

Angular is a powerful framework that allows developers to create reusable components. However, when a component is used in different contexts, it may require unique styles. This can be challenging, especially if you have a shared component library that needs to adapt visually based on where it's being used. In this guide, we will address the problem of how to apply different styles to a common component instance in Angular.

The Challenge: Shared Component Styling

Imagine you have an amount component which is used in several parts of your application. Each instance of this component might need to look different — for example, you could require a different background color or text style based on the context where the component is used.

This is particularly important for background, h2, and button styles that are distinct for each usage, making it essential to find a way to provide these differing styles efficiently without duplicating code.

The Solution: Using Angular’s Input Decorators

To create a flexible styling solution for your common component, we can utilize Angular’s @ Input() decorator alongside the ngClass or ngStyle directives. This approach allows you to pass class names or styles directly to the component when you instantiate it.

Step 1: Define the Input Property

First, modify your account-component to accept a custom class. This can be achieved as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update the Component Template

Next, you need to bind the customClass property to your component template using ngClass. This code will apply the passed class dynamically:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Define Styles in CSS

To showcase different styles, define your CSS classes. For instance, you might add the following to your component’s CSS file:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Pass the Class from Parent Component

When you utilize the account-component in a parent component, you can now easily specify which style to apply by passing the appropriate class name:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By using the @ Input() decorator and Angular’s powerful ngClass directive, you can achieve flexible and dynamic styling for shared components. This way, your amount component can be adapted to various contexts without the need for code duplication.

With this approach, you'll maintain a clean architecture while providing the necessary visual flexibility required by your application. Happy coding!