angular 2 include css file common to all pages

Question

I know to include internal styles and include external style for a component in Angular 2

import {Component} from 'angular2/core';

@Component({
    selector: 'test',
    templateUrl:'app/test.component.html',
        styleUrls:['app/test.component.css']
})
export class AppComponent {
    carparts = [
    {
        "id": 1,
        "name": "Super Tires",
        "description": "These tires are the very best",
        "inStock": 5
    },
    {
        "id": 2,
        "name": "Reinforced Shocks",
        "description": "Shocks made from kryptonite",
        "inStock": 0
    }];

    totalCarParts(){
        let sum = 0;
        for (let carPart of this.carparts) {
            sum += carPart.inStock;
        }
        return sum;
    }
}

I want to include some common css that could be used over my entire application like normal html.

Is there any angular specific way of doing it or this is the proper way??

Place it in the index.html i would say.. :)

Poul Kruijt
– Poul Kruijt

2016-07-14 10:24:29 +00:00
Commented Jul 14, 2016 at 10:24 — Poul Kruijt
– Poul Kruijt, Commented Jul 14, 2016 at 10:24
there is no specific way of doing it in angular right...

Karthikeyan sundaramoorthi
– Karthikeyan sundaramoorthi

2016-07-14 10:25:40 +00:00
Commented Jul 14, 2016 at 10:25 — Karthikeyan sundaramoorthi
– Karthikeyan sundaramoorthi, Commented Jul 14, 2016 at 10:25

Randy · Accepted Answer · 2016-07-14 10:25:58Z

6

index.html:

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles/sheet.css"/>
</head>
...

answered Jul 14, 2016 at 10:25

Randy

9,8575 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karthikeyan sundaramoorthi Over a year ago

Is this the legal way of achieving it?

Randy Over a year ago

This is legal for every HTML framework, and even without a framework. If you add a stylesheet in angular, it simply places the content of that file in the header, so there is no actual difference except this occurs everywhere.

Herc · Accepted Answer · 2017-04-20 11:32:05Z

2

Alternatively, there is a src/styles.css file in the standard Angular project fileset. If you add the styles into this, they will be included inline automatically into the of your index.html.

answered Apr 20, 2017 at 11:32

Herc

5274 silver badges9 bronze badges

Collectives™ on Stack Overflow

angular 2 include css file common to all pages

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related