Angular Styling

Learn different techniques for applying dynamic styles to your Angular components

39 snippets

90 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Key Points

In this chapter we will analyze several techniques and strategies for:

work with dynamic styles in Angular v.18

install, configure and use CSS frameworks: Tailwind, Daisy, Bootstrap

How Angular "encapsulation" works

This chapter includes 15 examples. Sign in to see everything. It's completely free

# 01. External CSS file

SWITCH LAYOUT

video in italian only

The styleUrl property in the @Component decorator links to an external CSS file. Angular automatically fetches and applies these styles to the component.

In this example, the styleUrl property points to ./app.component.css, which contains the CSS styles for this component.

Here, we have three div elements with different class names (primary, danger, and success). These classes will be styled according to the CSS rules defined in app.component.css.

app.component.ts

app.component.css

src/app.component.ts

Add a new warning message in the template with a different color (i.e. orange)

Click or in the editor to practice

# 02. Inline Styles

SWITCH LAYOUT

Video in Italian only

The result of this example is the same as the previous one. The only difference is that now we include the CSS in the TypeScript file by using the styles property.

We wrap all the CSS inside template literals using backticks ` since it supports multi-line strings.

I usually prefer this approach, just as I love inline HTML templates, because it really decreases the amount of file and folders of the project. Of course if the total of lines of CSS is high, I prefer an external file

src/app.component.ts

Add a new info message in the template with a different color (i.e. blue)

Click or in the editor to practice

# 03. Class Binding [class.xyz]

SWITCH LAYOUT

Video in Italian only

In Angular, the syntax you see in the div element above is a powerful feature called class binding.

This allows you to conditionally apply or remove CSS classes based on the component's state.

When condition is true, the xyz class is applied to the element.

The Example

The component has a template with a div element and three buttons. The div always use the alert class and conditionally applies the primary, danger, or success class based on the alert.type value.

src/app.component.ts

Add a button to display a different alert, for instance an info alert colored in blue

Click or in the editor to practice

# 04. Dynamic Attributes and Class Methods

SWITCH LAYOUT

Video in Italian only

In this example we use template binding [attribute] to dinamically assign a CSS class to the element. This approach can be extremely useful when the business logic for assigning the class is complex.

In the first implementation I added to this course, at the time I recorded the video (in italian), I bind the [class] attribute to the method. But this is not a good practice, as I explained in the Signal chapters, since we can have performance issues.

So here a new implementation that use signals and computed, to evaluate and define the class to apply only when signal changes.

SWITCH LAYOUT

Version with method binding (not optimized)

src/app.component.ts

Version with computed (optimized)

src/app.component.ts

Do the same for the message. Create a getMessage computed property and return a different message in according to the alert().type. Use this new computed property to display the message in the template instead to manually set its value when buttons are clicked

Click or in the editor to practice

# Performance & Change Detection

Invoke methods within the template binding in Angular can lead to performance issues because it is called every time Angular's change detection runs.

Change Detection Cycle

Angular uses a change detection mechanism to check for changes in the application state and update the view accordingly. This cycle runs frequently, often multiple times per second. Every time change detection runs, Angular will execute the getCls() method because it is used in the template binding ([class]="getCls()").

And more the application grows and User Interface becomes complex and more the Change Detection is triggered causing slowdowns

Performance Overhead

Each call to getCls() involves a switch statement and string concatenation behind the scenes.

While this may seem trivial, the cumulative effect of calling this method numerous times can become significant, especially in complex applications with many bindings and frequent state changes. Even small methods, when called repeatedly during each change detection cycle, can add up to a noticeable performance impact.

# 05. ngClass directive

SWITCH LAYOUT

Video in Italian only

The ngClass directive conditionally applies CSS classes to a HTML element based on the value of a condition

What are directives?

An Angular directive is a special syntax in Angular that allows you to extend HTML's capabilities by attaching custom behavior to elements in the DOM.

Directives can be used to manipulate the DOM by changing the appearance, structure, or behavior of elements and components

Directives must be imported in the imports decorator property in order to be used in template

ngClass is an Angular directive that allows you to dynamically add or remove CSS classes on an element.

src/app.component.ts

Add support for a new warning message

Click or in the editor to practice

# 06. ngclass - obj, array, strings

SWITCH LAYOUT

Video in Italian only

Different Ways to Use ngClass

The ngClass directive allows you to bind an element's class attribute to a condition or a set of conditions.

ngClass can take a string, an array, or an object to determine which classes are applied.

String:

A single class or a space-separated list of classes can be applied.

This will apply both alert and primary classes to the element.

Array:

An array of class names can be provided, and each class in the array will be applied.

This will apply both cls1 and cls2 classes to the element.

Object:

An object where keys are class names and values are conditions (boolean) determining if the class should be applied.

This will conditionally apply the success, primary, or danger class based on the alert.type value.

src/app.component.ts

Remove comments and play with the different ways to use ngClass

Click or in the editor to practice

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Angular Styling

Learn different techniques for applying dynamic styles to your Angular components

39 snippets

90 mins

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Key Points

In this chapter we will analyze several techniques and strategies for:

work with dynamic styles in Angular v.18

install, configure and use CSS frameworks: Tailwind, Daisy, Bootstrap

How Angular "encapsulation" works

This chapter includes 15 examples. Sign in to see everything. It's completely free

# 01. External CSS file

SWITCH LAYOUT

video in italian only

The styleUrl property in the @Component decorator links to an external CSS file. Angular automatically fetches and applies these styles to the component.

In this example, the styleUrl property points to ./app.component.css, which contains the CSS styles for this component.

Here, we have three div elements with different class names (primary, danger, and success). These classes will be styled according to the CSS rules defined in app.component.css.

app.component.ts

app.component.css

src/app.component.ts

Add a new warning message in the template with a different color (i.e. orange)

Click or in the editor to practice

# 02. Inline Styles

SWITCH LAYOUT

Video in Italian only

The result of this example is the same as the previous one. The only difference is that now we include the CSS in the TypeScript file by using the styles property.

We wrap all the CSS inside template literals using backticks ` since it supports multi-line strings.

src/app.component.ts

Add a new info message in the template with a different color (i.e. blue)

Click or in the editor to practice

# 03. Class Binding [class.xyz]

SWITCH LAYOUT

Video in Italian only

In Angular, the syntax you see in the div element above is a powerful feature called class binding.

This allows you to conditionally apply or remove CSS classes based on the component's state.

When condition is true, the xyz class is applied to the element.

The Example

src/app.component.ts

Add a button to display a different alert, for instance an info alert colored in blue

Click or in the editor to practice

# 04. Dynamic Attributes and Class Methods

SWITCH LAYOUT

Video in Italian only

So here a new implementation that use signals and computed, to evaluate and define the class to apply only when signal changes.

SWITCH LAYOUT

Version with method binding (not optimized)

src/app.component.ts

Version with computed (optimized)

src/app.component.ts

Click or in the editor to practice