Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular 2 include css file common to all pages

Tags:

html

css

angular

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

like image 633
Karthikeyan sundaramoorthi Avatar asked Apr 26 '26 09:04

Karthikeyan sundaramoorthi


2 Answers

index.html:

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles/sheet.css"/>
</head>
...
like image 129
Randy Avatar answered Apr 29 '26 01:04

Randy


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.

like image 25
Herc Avatar answered Apr 29 '26 01:04

Herc