Angular 10 – Component Styles

We talked a bit about Styling previously in Angular 10 Styles. But now, we’ll look at more detail on styling.

1. Introduction to Component Styling
2. Scope Restrictions
3. Special Selectors
4. Applying Component Styles
5. External and Global Style Files
6. ngStyle and ngClass Directives

1. Introduction to Component Styling

The first thing to note is that Angular applications are styled with standard css. So when you create a new component, in the @Component section, you’ll see the stylesUrls property metadata for that component. This you can see below:

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  styles: ['h2 {color: black}']
})

In addition to stylesUrls, you can also add actual styles as indicated. Any styles here applies only to the particular component template. They are not inherited by child components.

2. Scoping Restrictions

The following 5 restrictions apply to component styling in Angular application:

1. CSS class names and selectors can be used as appropriate in the context of each component
2. Class names and selectors are local to the component
3. Changes in other styles in the application does not affect the component styles
4. CSS  style for each component can be placed in same directory as the template.
5. CSS styles for specific components can be altered without affecting other components

3. Special Selectors

There are few special selectors that can be used. This is coming from shadow DOM style scoping.

:host

This is called a pseudo class selector and is used to apply a style from the child to the parent component. For instance, if you write the class below in a component, and then nest this component within a parent component, this style will apply to the parent(host) component.

:host {
  display: block;
  border: 1px solid green;
  font-size: 15px;
}

Another special selector is :host-context but, I’ll not cover this here. You can read it up.

4. Applying Component Styles

There are three ways you can apply styles to  a component we’ll cover:

Setting the styles or stylesUrls metadata

This is what we already mentioned previously. You can add just add styles array property to the @Component section. When you create a component, you can tell Angular you want to use this styling method by adding –inline-style flag.

ng generate component person --inline-style

Inline in the template HTML

In this method, you embed your CSS style directly into the HTML template. You enclose the styles with the <style></style> tag.

<h2>Inline Styles demo</h2>
<style>
  button {
    background-color: white;
    border: 1px solid #777;
  }
</style>
<button type="button">Click</button>

In place of the styles markup, you can also just add  an import using the <link> tag. Like so:

<link rel="stylesheet" href="../assets/person.component.css">

In this case, you need to make sure that this style is available in the assets folder.

Using CSS @Imports

This approach helps you to import a stylesheet into another stylesheet. For instance, the code below import the style light.css.

@import './light.css';

5. External and Global Style Files

As we discussed in the Angular Files Structure part, there is a global stylesheet called Styles.css. Any style here is applied to all components. This because, it is configured in the angular.js file.

To do: Open the angular.json file and check to see the Style.css.

6. ngStyle and ngClass Directive

We previously covered Angular Directives.  Using the ngStyle directive (which is an attribute directive), you can apply a style to any DOM element.  An example is given below:

<p [ngStyle]="{background: 'blue'}">
  Learn Angular Easily>
</p>

Similarly, you can use ngClass to set the CSS class of a particular element. The class should be an existing class. For example, the code below uses ngClass to apply styles to a button. It could be a single class or array of classes

<p>Assigning an Array of classes:</p>
<button [ngClass]="['btn', 'btn-primary']">Click Here</button>

I suggest you get creative with this. Try out all these different ways of styling.