How to use styleUrls and styles in Angular 2?

How to use styleUrls and styles in Angular 2?

The Angular 2 “styles” or “styleUrls” should only be used for css rules and it is affect the style of the template elements.

This is the best approaches to add styles directly to the components and the view encapsulation is set per component. It is use for some situations.

An example to add external styles to the components result text color is red,

Syntax –
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
    styles: ['.tbl-row-border { border: 1px solid red;}','.txt-color{color:red;}']

home.component.html :-
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
    <h5>Angular 2 for loop typescript example - *ngFor</h5>
<div class="ibox-title">
    <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" /> <strong>Resut- {{values}}</strong>
<div class="ibox-content">
    <div class="table-responsive">
        <table class="table table-striped">
                    <th>Name </th>
                    <th>SiteUrl </th>
                    <th>Actions </th>
                <tr *ngFor="let user of userlist; let i = index" class="tbl-row-border">
                    <td><a href="{{}}" target="_blank">{{}}</a></td>
                    <td><a (click)="addUser(user)">A</a>|<a (click)="updateUser(user)">E</a>|<a (click)="deleteUser(user)">D</a></td>

home.component.ts :-

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

    selector: 'home',
    templateUrl: './home.component.html',
    //styleUrls: ['./home.component.css'],
    styles: ['.tbl-row-border { border: 1px solid red;}']

export class HomeComponent {
    userlist: Users[];

    constructor() {
        this.userlist = [{ Id: '1001', name: 'Anil SIngh', site: '' },
        { Id: '1002', name: 'Alok', site: '' },
        { Id: '1003', name: 'Reena', site: '' },
        { Id: '1004', name: 'Dilip', site: '' },

    values = '';
    onKeyUp(event: any) {
        this.values =;

    addUser(user) {

    updateUser(user) {

    deleteUser(user) {

export class Users {
    Id: String;
    name: String;
    site: String;

app.module.ts :-

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { MenuComponent } from './components/menu/menu.component';

    bootstrap: [ AppComponent ],
    declarations: [
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
export class AppModule {

Result -

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book