Sunday, December 10, 2017

Global CSS Styles in Angular

Angular recommends component based styling as the component should encapsulate every UI functionality. Here is a typical example using stylesheet for a component:

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

@Component({
    selector: "top-bar",
    templateUrl: "./TopBarComponent.html",
    styleUrls: ["./TopBarComponent.css"]
})
export class TopBarComponent {
}

In some situations we may need to have styles that we want to apply to multiple components or globally across the entire application. In this case we can define a css file and use it in the index.html page.

<link rel="stylesheet" href="~/styles.css" />

With the above approach we may lose the building and bundling provided by Angular and have to extend or implement a separate webpack or gulp task.
I recommend creating a separate component which contains all the global styles and expose these component’s style using encapsulation as shown below:

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
    selector: "app-styles",
    template: "",
    styleUrls: ["./AppStyles.css"],
    encapsulation: ViewEncapsulation.None
})
export class AppStyles {
}

ViewEncapsulation.None exposes all the styles defined in AppStyles.css globally and these styles can be across the application. As a final step we need to include this AppStyles Component (which does not have any visible elments) inside our AppComponent


<app-styles></app-styles>

3 comments:

  1. nice blog
    great information.
    VLCC Institute Makeup Courses gives you the platform to become a Professional Makeup Artist by learning from the best in the Beauty Industry.
    Our state-of-the-art Makeup Classes will walk you through everything that goes into establishing a successful career in this fun, fast-paced and fabulous industry.
    We give a certificate of completion to our students upon completion.

    ReplyDelete

  2. After going over a handful of the articles on your web page, I truly appreciate your
    technique of writing a blog. I added it to my bookmark site
    list and will be checking back in the near future. Please visit my website too and tell
    me your opinion.


    kanchipuram sarees

    ReplyDelete
  3. Your blog is awesome.You have clearly explained about it ...It's very useful for me to know about new things..Keep on blogging.

    Angular Training in Chennaihennai
    Angular JS Training in Chennai

    ReplyDelete