CODEWITHSUNDEEP
htmlcssangular
Karthikeyan sundaramoorthi
Karthikeyan sundaramoorthi

Reputation: 554

angular 2 include css file common to all pages

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??

Upvotes: 3

Views: 4043

Answers (2)

Herc
Herc

Reputation: 527

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.

Upvotes: 2

Randy
Randy

Reputation: 9809

index.html:

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

Upvotes: 6

Related Questions