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??
index.html:
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppController">
<head>
<title>Title</title>
<link rel="stylesheet" href="styles/sheet.css"/>
</head>
...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With