There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html or added via angular-cli.json. The angular allow us to add the component specific styles in individual components, which will override the global styles. In this article we will learn how to add global CSS styles to angular apps. We will also learn how to add custom CSS files & external style sheet to angular application..
First, create an example application using the following command
ng new GlobalStyle
Let us add new component
ng g c test
The above command will create the TestComponent under the folder test and adds it to the AppModule. You can learn more such Angular CLI Commands from the Angular CLI Tutorial.
Open the test.component.html and add the following HTML
<p>
this para is from test component
</p>
Now open the app.component.html add copy the following HTML
<h1>
Welcome to {{ title }}!
</h1>
<p>This para is from app component</p>
<app-test></app-test>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular Global Style';
}
Run the app and you will see the following
Now let us add the global CSS Styles to the above example application
If you have created the Angular App using Angular CLI, then you can add the custom CSS files in angular.json under the styles array
angular.json was known as angular-cli.json in angular 5 and below
You will find it under the node projects-> GlobalStyle -> architect -> build -> options -> styles
By default, the angular adds the styles.css under the src folder.
],
"styles": [
"src/styles.css"
],
The reference to the CSS file is relative to where angular.json file is stored.
which is
project root folder
Open the styles.css and add the following CSS rule
p { color : blue}
When you add CSS files using the angular.json configuration file, the CSS rules are bundled into the styles.bundle.js and injected into the head section
Create a morestyles.css under the folder src/assets/css and add the following CSS style
p { color : red}
Next, add the CSS file to the angular.json as shown below.
"styles": [
"src/styles.css",
"src/assets/css/morestyles.css"
],
Order of the styles sheets are important as the last one overrides the previously added CSS rules.
There are three ways you add the external style sheets.
For example to include bootstrap 4 you can copy the latest version from the
link
https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css
and copy it under the folder assets/css/bootstrap.min.css
"styles": [
"src/styles.css",
"src/assets/css/morestyles.css",
"src/assets/css/bootstrap.min.css"
],
The other option is to install the npm package provided by the third party libraries. The CSS files are copied under the node_modules folder. For Example to install bootstrap run the following npm command
npm install bootstrap
And then add it to the angular.json as shown below
"styles": [
"src/styles.css",
"src/assets/css/morestyles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
You can import them directly in one of the style sheets. For Example open the styles.css and add the following import statement at the top.
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css";
If you are not using angular-cli, then you an go old school and link it directly in the index.html file as shown below. You can use this even if you are using the angular-cli.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
The following includes the local CSS files.
<link rel="stylesheet" href="assets/css/morestyles.css">
The path must be with reference to the index.html
These styles sheets are not included in the bundle, but loaded separately unlike when you are using angular-cli.
These styles sheets are not included in the bundle, but loaded separately unlike when you are using angular-cli.
