Yesterday, when I was working on an Angular project, and there was a need to customize the layout on different devices basing on the amount of data I have on that specific element — that’ll require media query CSS obviously. I thought that I should write an article on how to style in Angular 2+, so there it is :)

There are plenty of methods to style an element in Angular 2+. We will go through almost all of them, one by one.

*Please notice that, in Angular 2+, you can style a element by putting the CSS style on the head of the html file or directly inline to the html tags themselves.

Inline Styles

You style the element directly from the component — I don’t like this.

@Component({

templateUrl: 'box.html',

styles: [`

.box {

height: 100px;

width: 100px;

}

`],

})

2. External Stylesheets

I prefer this method. It’s just easy to manage.

@Component({

styleUrls: ['css/style.css'],

templateUrl: 'box.html',

})

*For inline and and external style, please read more about ViewEncapsulation

3. Using [style.property] Binding

You can use style property binding directly in your template.

<div [style.color]="'red'"> This should be red </div>

Or you can do it through a method

<div [style.color]="color"> This should be red </div>

The getColor method will get the color from the component.

...

export class App {

//set a property that holds a color for our style.

color = this.getColor();



//function to get color

public getColor() {

return 'red';

}

}

4. Using [className] directive

It’s really straight forward:

<p[className]="'active'"> Will change based on class name! </p>

You may wonder why we don’t put class=”style” from the beginning. Yes, it will work, but you will have more controls on the class name by using the directive.

<p[className]="condition ? 'active' : 'inactive'">

Will change based on class name!

</p>

5. Using [class.property] Binding

It’s the same with style property binding, but you will get a class name instead.

<div [class.active]="condition"></div>

The class name active will show only when the condition returns true.

6. Using [ngClass] Directive

The ngClass directive will be used when there are multiple classes can be added to the element.

<div [ngClass]="['class-1', 'class-2']"></div>

We can also control the class names by applying the conditions.

<div [ngClass]="{

'class-1': condition,

'class-2': condition

}">

</div>

7. Using [style.property] Binding

The style property binding will apply the style directly to the element that you put it in.

<p [style.background-color]="'White'">White background</p>

<p [style.font-size.px]="16">Font size 16px</p>

The style property binding can also be applied by giving a condition to it.

<p [style.font-size.px]="condition ? 16 : 10">

Font size 16px or 10px

</p>

8. Using [ngStyle] Directive

The ngStyle directive will take an Object as an input, so you can apply multiple styles to an element.

<div [ngStyle]="{

'color': 'teal',

'font-size': '16px',

'background-color': background_color

}">

Multi-style values

</div>

You can give the value directly to the style or get it from the component

...

export class AppComponent {

public background_color = "white";

}

9. Adding data-attribute in Angular 2+

This may sound strange to you, but there were some cases that I had to use this in one of my project when I wanted more controls over the element’s style.

<p [attr.data-text]="condition ? 'active' : 'inactive'">

Custom data attribute

</p>

After you have the data-attribute value, then you can target it by using normal CSS.

[data-text='active']{display: none;}

[data-text='inactive']{display: block;}

These methods above are not the only methods that we can use to control the style of the elements. I am happy to learn more about other methods and user cases. Please leave a comment if you have a great solution on your project!