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
Create a new angular application
ng new ComponentStyle
Create three component as shown below
ng g c home
ng g c test1
ng g c test2
Copy the following code to AppRoutingModule
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
<!--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>
The Angular allow us the specify the component specific styles. There are four ways you can apply style.
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.
Use the styles: metadata of the @Component or @Directive to specify the CSS rules as shown below.
@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.
styles: [
`p { color:blue}`,
`h1 {color:blue}`
],
Specify the external style sheets using the styleUrls: meta data of the @Component decorator or @directive directive.
@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
styleUrls: ['./test2.component.css','.another.stylesheet.css'],
You can specify both Component inline & Component External style together as shown below
@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.
We can also specify style within the component template file by using the style or link> tags as shown below
test2.component.html
<style>
p {
color: purple;
}
</style>
<p>
test2 works!
</p>
You can add the external style sheets using the the link tag as shown below. The path must be relative to the index.html
<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
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<p>
test2 works!
</p>
The styles are applied in the following order
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
