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
stylesproperty in component metadata. - Using
styleUrlsproperty in component metadata. - Inline style in the template.
- Inline
linktag in the template. - Using CSS
@import. - Defining Styles in External or Global style files.
- Defining Non CSS style files(
.scss,.less,.styl) url instyleUrlsproperty 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.stylesarray 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 :