Angular Component Styles

The Code Points July 02, 2022 0

In this article, we will look at different approaches to style our Angular Components. We looked at how to style the Angular app using global styles. Components can be styled in a variety of ways. For instance, inline style, external style, template inline style, ngClass directive, ngStyle directive, and so on. In this article on Angular Component Styles, we'll go over all of them.

The Angular Components have their own look and feel. CSS styles, on the other hand, have a global reach. Angular uses View Encapsulation strategies to encapsulate component styles. As a result, the styles of one component should not bleed into another view.

Example

Create a new angular application using the following command.

ng new ComponentStyle

Create three components as shown below.

ng g c home
ng g c test1
ng g c test2

To AppRoutingModule, paste the following code.

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 { }

To app.component.html, paste the following code:

<!--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

We can specify component-specific styles with Angular. Style can be applied in four different ways.

1. Component Inline style
2. Component External Style
3. Template using link directive
4. Template using style directive

Component Inline Style

To specify CSS rules, use the styles: metadata of the @Component or @Directive, as illustrated below.

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styles: [
    `p { color:blue}`
  ],
})

To enter the multi-line style, use the backtick character.

Multiple styles can be added by separating them with a comma, as illustrated below.

styles: [
    `p { color:blue}`,
    `h1 {color:blue}`  
  ],

Component External Style

Use the styleUrls: metadata of the @Component decorator or @directive directive to specify external style sheets.

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css'],
})

Multiple styles can be added by separating them with a comma, as illustrated below.

styleUrls: ['./test2.component.css','.another.stylesheet.css'],

As seen here, you may define both Component inline and Component External styles at the same time.

@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styles:[`p {color:yellow}`],
  styleUrls: ['./test2.component.css'],
})

Template Inline Style using style tag

The <style> and <link> tags can be used to specify style within the component template file, as seen below.

add the following code under the test2.component.html file:

<style>
  p {
    color: purple;
  }
  </style>
 
<p>
  test2 works!
</p>

Template Inline Style using the link tag

The external style sheets can be added using the link tag, as illustrated below. The path must start with index.html and end with index.html.

<link rel="stylesheet" href="assets/css/morestyles.css">
<p>
  test2 works!
</p>

You can also use an external source to load CSS, as illustrated below.

<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 order listed below.

1. Component inline styles i e. Styles defined at @Component.styles
2. Component External styles i.e. @Component.styleUrls
3. Template Inline Styles using the style tag
4. Template External Styles using the link tag

Other ways to make a component more stylish

The technique above lists the many options for styling the entire component. Individual elements in the angular framework can be styled in a variety of ways.

Conclusion

In this article, we learned different approaches to style our Angular Components. We also covered how to style the Angular app using global styles.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.