In this tutorial, we look at various ways by which we can style our Angular Components. We looked at how to apply global styles to the Angular app. You can apply styles to Components in various ways. For example, using inline style, external style, template inline style, ngClass directive, ngStyle directive, etc. We cover all of these in this article on Angular Component styles
The Angular Components maintain their own style & state. But CSS styles are global in scope. The angular encapsulates the component styles using the View Encapsulation strategies. Therefore ensuring that the styles of one component do not bleed into another view.
Further Reading On Component styles
Table of Contents
Example Application
Create a new angular application
1 2 3 | ng new ComponentStyle |
Create three component as shown below
1 2 3 4 5 | ng g c home ng g c test1 ng g c test2 |
Copy the following code to AppRoutingModule
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { Test1Component } from './test1/test1.component'; import { Test2Component } from './test2/test2.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ {path:'',redirectTo:'home',pathMatch:'full'}, {path:'home',component:HomeComponent}, {path:'test1',component:Test1Component}, {path:'test2',component:Test2Component}, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Copy the following code to app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!--The content below is only a placeholder and can be replaced.--> <h1> Welcome to {{ title }}! </h1> <p>This para is from app component</p> <ul> <li><a [routerLink]="['/home']" routerLinkActive="router-link-active">Home</a> </li> <li><a [routerLink]="['/test1']" routerLinkActive="router-link-active">Test1</a> </li> <li> <a [routerLink]="['/test2']" routerLinkActive="router-link-active" >Test2</a></li> </ul> <router-outlet></router-outlet> |
How to add styles to Angular Components
The Angular allow us the specify the component specific styles. There are four ways you can apply style.
- Component Inline style
- Component External Style
- Template using link directive
- Template using style directive
How these styles affect the component and other components, depends on the ViewEncapsulation strategy used by the component. By default, Angular uses ViewEncapsulation.Emulated , which ensures that the component styles do not bleed out to other components. You can click to find out more about View Encapsulation in Angular.
Component Inline Style
Use the styles: metadata of the @Component or @Directive to specify the CSS rules as shown below.
1 2 3 4 5 6 7 8 9 10 | @Component({ selector: 'app-test1', templateUrl: './test1.component.html', styles: [ `p { color:blue}` ], }) |
Use backtick character to enter the multi-line style.
You can add multiple styles by separating each other using a comma as shown below.
1 2 3 4 5 6 | styles: [ `p { color:blue}`, `h1 {color:blue}` ], |
Component External Style
Specify the external style sheets using the styleUrls: meta data of the @Component decorator or @directive directive.
1 2 3 4 5 6 7 | @Component({ selector: 'app-test2', templateUrl: './test2.component.html', styleUrls: ['./test2.component.css'], }) |
You can add multiple styles by separating each other using a comma as shown below
1 2 3 | styleUrls: ['./test2.component.css','.another.stylesheet.css'], |
You can specify both Component inline & Component External style together as shown below
1 2 3 4 5 6 7 8 | @Component({ selector: 'app-test2', templateUrl: './test2.component.html', styles:[`p {color:yellow}`], styleUrls: ['./test2.component.css'], }) |
The Angular inserts component inline style first and then inserts the component external style. Hence, component external styles take precedence over the component inline styles.
Template Inline Style using style tag
We can also specify style within the component template file by using the <style> or <link> tags as shown below
test2.component.html
1 2 3 4 5 6 7 8 9 10 11 12 | <style> p { color: purple; } </style> <p> test2 works! </p> |
Template Inline Style using link tag
You can add the external style sheets using the the link tag as shown below. The path must be relative to the index.html
1 2 3 4 5 6 | <link rel="stylesheet" href="assets/css/morestyles.css"> <p> test2 works! </p> |
You can also load the CSS from an external source as shown below
1 2 3 4 5 6 7 8 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <p> test2 works! </p> |
Style Priority
The styles are applied in the following order
- Component inline styles i e. Styles defined at
@Component.styles - Component External styles i.e.
@Component.styleUrls - Template Inline Styles using the
styletag - Template External Styles using the
linktag
Other ways to add style to component
The above method lists the various ways you can style the entire component. There are a few ways you can add style to individual elements in the angular
