Angular applications are styled with standard CSS. Angular provides different ways to style the elements of the component by defining styles in the styles
or stylesUrls
properties of component metadata(@Component({})
) and also in other ways.
In this article, we’ll see how can we use the different ways we can style the angular components.
Table of Contents
How to use Angular Component Style
Angular bundles the component style with a component which enables a more modular design than regular stylesheet.
In Angular, component CSS styles are encapsulated into the component’s view and don’t affect the rest of the application.
So the style you specified in component metadata will only be applied to that component and will not be applied to any of its child component or any other component in the application.
There are different ways you can style the Angular component template.
- Using
styles
property in component metadata. - Using
styleUrls
property in component metadata. - Inline style in the template.
- Inline
link
tag in the template. - Using CSS
@import
. - Defining Styles in External or Global style files.
- Defining Non CSS style files(
.scss
,.less
,.styl
) url instyleUrls
property in component metadata.
1. Using styles property in component metadata.
Angular component metadata is having one property called styles
.
It’s a type of array where you can define a string which defines CSS styles.
Here in the below example, you can see that we’ve specified CSS style in styles
property.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles: [`
h1 {
color: red;
}
h2 {
color:green;
font-size:10px
}
`]
})
export class AppComponent {
}
app.component.html
<h1> Angular Component Style</h1>
<h2> Using styles property in component metadata.</h2>
You can also specify the CSS styles
in an array as follows:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles: [
`h1 {
color: red;
}`,
`h2 {
color:green;
font-size:10px
}`
]
})
If you’ll look in the above code, I’ve used back-tick character(`
). It’s not same a single quote('
). But it has a few advantages. Back-tick character is introduced in ES6. It allows you to compose string over serval lines which will make it more readable.
2. Using styleUrls property in component metadata.
Another property in angular component metadata is styleUrls
, which is an array and provides a way to load an external CSS file.
When to use styleUrls
over styles
in Angular Component
styles
property is good if the simple and small style definitions are declared but if the template style is complex and contains a lot of style definitions, I would recommend using styleUrls
property. Because it’s more readable in a separate file.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
Here as you can see in the above code, we’ve changed styles
property to styleUrls
property and specified the name of CSS file in the array.
You can also specify multiple CSS files if you want as follows:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css','./app1.component.css','./app2.component.css']
})
export class AppComponent {
}
app.component.css
h1 {
color: red;
}
h2 {
color:green;
}
app.component.html
<h1> Angular Component Style</h1>
<h2> Using styles property in component metadata.</h2>
3. Inline style in the template.
You can also embed CSS styles directly into the template file as follows. you don’t need to specify styles
or styleUrls
in this case.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
}
<strong>app.component.html</strong>
<style>
h1 {
color: red;
}
h2 {
color:green;
}
</style>
<h1> Angular Component Style</h1>
<h2> Using styles property in component metadata.</h2>
4. Inline link tag in the template.
One of the ways to style the angular component is using the link tag that we usually define in html file.
<strong>app.component.ts</strong>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
}
app.component.html
<link rel="stylesheet" href="./app.component.css">
<h1> Angular Component Style</h1>
<h2> Using styles property in component metadata.</h2>
5. Using CSS @import.
You can import CSS files into the CSS file using standard CSS @import
rule.
@import '../assets/theme.css'
h1 {
color: red;
}
h2 {
color:green;
}
6. Defining Styles in External or Global style files.
While building an application with Angular CLI. you must include all the external assets and style files in angular.json
the file.
You’ll need to register a global external file in styles
array in angular.json
.
By default, Angular CLI declares one file called styles.css
in styles
section.
<strong>angular.json</strong>
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/theme/custom-theme.scss",
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
.....
}
}
},
....
....
....
}
}
},
"defaultProject": "demo"
}
styles
array can be a simple path string or an object the points to extra entry point file.
The associated builder will load the files and it’s dependency as an external bundle. you can name that bundle using bundleName
if you want.
"styles": [
{ "input": "src/theme/custom-theme.scss", "bundleName": "external-custom-theme-module" }
]
Lazy loading external style module using inject
property
By default, Angular will inject the module but you can override these options by specifying inject
property as follows.
"styles": [
{ "input": "src/theme/custom-theme.scss", "inject": false, "bundleName": "external-custom-theme-module" }
]
You can mix the string and object in styles array as follows.
"styles": [
"src/styles.css",
"src/theme/custom-theme.scss",
{ "input": "src/theme/lazy-style.scss", "inject": false },
{ "input": "src/theme/modal-style.scss", "bundleName": "modal-style" },
]
7. Defining Non CSS style files(.scss, .less, .styl) url in styleUrls property in component metadata.
You can defines style files of type .scss
, .less
, .stylus
in angular Component.styleUrls
metadata with appropriate extension.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
...
Style strings added to the
@Component.styles
array must be written in CSS because the CLI cannot apply a preprocessor to inline styles.
New Project
Changing CSS pre-processor
When you’re creating a new project, you can define an extension that you want for style files as follows:
ng new my-project --style=sass
Existing Project
If you have an existing project and want to change the extension of style files so that going forward if you’ll create a new component, the style files generate your choice of style files.
You can run the following command for that:
ng config schematics.@schematics/angular:component.styleext scss
I hope you like this amazing article.
Also Read :