Different ways to add css in an Angular component.

Angular 2(+)CSSComponent styling

Different ways we can add styles in Angular application. Let us check those one by one.

1. Adding style url into the component.
2. Adding css inside the component.
3. Adding css along with template.
4. Inline style.

1. Adding style url into the component.

---

This is one of the common way to include a css file into your component. Use sass (css preprocessor) to build your angular application. It will give proper grip on your css. Check below component code for including a style url.

import { Component } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent {

}

Similar way you include more than one css. Check below code for that.

import { Component } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss', '../anotherStyle.scss']
})
export class GeneralComponent {

}

2. Adding css inside the component.

---

Another way is that you can add css directly inside the component. You can use this especially when your components required more css manipulation for some conditions. Check below code for better understanding.

import { Component } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styles: [
    `  
    .content{
        color:red;
      }   
    `
  ]
})
export class GeneralComponent {

}

Using Angular you can add or remove class/style conditionally, read here for more info: - Conditionally add class using Angular - 5 methods.

3. Add style along with template.

---

This is another way of adding css into your component. In this case we are adding css along with templates. Check below code for more info.

import { Component } from '@angular/core';

@Component({
  selector: 'app-general',
  template: `
    
  <style>
    .content {color :red;}
    .active {color:blue;}
  </style>
  <div class="content">Test</div>
  
  `,
})
export class GeneralComponent {

}

You can add/remove a class by clicking a dynamic element using Angular, check this link for more info: - Add or remove active class on click.

4. Inline style

---

This is one of the old ways that people may not suggest as a good approach. Here we are adding inline css along with template html. Check below code.

import { Component } from '@angular/core';

@Component({
  selector: 'app-general',
  template: '<div style="color:red">Test</div>',
})
export class GeneralComponent {

}

As we know already css will give priority for last rendered. For example check below code.

.sampleStyle {
    color:red;
    color:blue;
}

In this example it will take color as blue.

If you are using Angular CLI, you can add external css and your main style file in this cli. For example check below code.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.scss"
      ],

Here I have added bootstrap and style.scss. As a best practice, in style.scss you can import all your css files.

In this article we have discussed about different ways for adding styles into an Angular component.

Angular 2(+)CSSComponent styling

Related Info

1. Angular 2/5 routing with simple examples.

2. Responsive image using HTML-5 srcset and Angular.

3. Rating star component using Angular.