Angular 2 templateUrl and styleUrls

The styleUrls is a component which uses to write inline styles, style Urls and template inline style.

The templateUrl is a function which returns HTML template.

Inline templates are specified directly in the component using template and it is more complex for bigger templates. As per expert suggestions, use templates and styles into a separate file, when your code more than 5 to 10 lines.

External templates define the HTML in a separate file and reference this file in templateUrl.

Stayed Informed - template vs. templateUrl?

To use a relative path in the templateUrl we must include import component form @angular/core

Some befits for template Urls i.e.

1.               Separations of code

2.               Easy debugging

The upcoming offline template compiler will inline templates linked by templateUrl.

Here, I am using “Inline Template” in the user components i.e.

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

@Component({
    selector: 'Users',
    template: `<div>
            <input (keyup)="onKey($event)" (click)="onClick()"/>            
            <div [hidden]="isActive" class="info">
                <h2>Active element or Not?</h2>
                <div>{{values}}</div>
            </div>
     </div>`,
    styleUrls: ['./user.component.css']
})

export class UsersComponent {
    values: string;
    isActive: boolean = false;

    onKey(event) {
        this.isActive = true;
        this.values += event.target.value;
    }
}

Example for Inline Template -

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { UserService } from '../service/user.service';
import { AppGlobals } from '../../shared/app.globals';

@Component({
    selector: 'users-app',
    template: `<div *ngFor="let user of users; let i = index">
                    <div>{{user.id }}</div>
                    <div>{{user.id | barcodepipe:true}}</div>
                    <div>{{user.login}}</div>
                    <div>{{user.description}}</div>
                    <div><a href="{{user.public_members_url}}" target="_blank">{{user.public_members_url}}</a></div>
              </div>`,
    styleUrls: ['./user.component.css'],
    providers: [UserService, AppGlobals],
})
export class UsersApp {
    //USERS DECLARATIONS.
    users = [];

    //USER COMPONENT CONSTRUCTOR.
    constructor(private _userService: UserService,
        private _global: AppGlobals) { }

    //GET USERS SERVICE ON PAGE LOAD and BIND UI GRID.
    ngOnInit() {
        this._userService.getAPIUsers(this._global.baseAPIUrl + 'users/api/GetUsers').subscribe(data => this.users = data);
    }
}

Example for external templates - Separate file-

import { Component} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { UserService } from '../service/user.service';
import { AppGlobals } from '../../shared/app.globals';

@Component({
    selector: 'users-app',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css'],
    providers: [UserService, AppGlobals],
})
export class UsersApp { 
  //USERS DECLARATIONS.
    users = [];

    //USER COMPONENT CONSTRUCTOR.
    constructor(private _userService: UserService,
        private _global: AppGlobals) { }

    //GET USERS SERVICE ON PAGE LOAD and BIND UI GRID.
    ngOnInit() {
        this._userService.getAPIUsers(this._global.baseAPIUrl + 'users/api/GetUsers').subscribe(data => this.users = data); 
    }
}

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