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.

Stayed Informed – Angular 2 Documentations and Examples

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

Syntax –

@Component({
    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>
<div class="ibox-title">
    <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" /> <strong>Resut- {{values}}</strong>
</div>
<div class="ibox-content">
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name </th>
                    <th>SiteUrl </th>
                    <th>Actions </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of userlist; let i = index" class="tbl-row-border">
                    <td>{{user.Id}}</td>
                    <td>{{user.name}}</td>
                    <td><a href="{{user.site}}" target="_blank">{{user.site}}</a></td>
                    <td><a (click)="addUser(user)">A</a>|<a (click)="updateUser(user)">E</a>|<a (click)="deleteUser(user)">D</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</div>
</div>

home.component.ts :-

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

@Component({
    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: 'http://www.code-sample.com' },
        { Id: '1002', name: 'Alok', site: 'http://www.code-view.com' },
        { Id: '1003', name: 'Reena', site: 'http://www.code-sample.xyz' },
        { Id: '1004', name: 'Dilip', site: 'http://www.codefari.com' },
        ];
    }

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

    addUser(user) {
        alert(JSON.stringify(user));
    };

    updateUser(user) {
        alert(JSON.stringify(user));
    };

    deleteUser(user) {
        alert(JSON.stringify(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';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent        
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { 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!!