python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 1 and Angular 2 Integration

Angular 2 Templates - template vs. templateUrl? How to Use Inline and External Templates?

A template is a HTML view that tells Angular 2 for render your components in the views.

The Angular 2 templates are very similar to Angular 1 but Angular 2 has some small syntactical changes.                         

You can see the changes as below,
1.         {}: Is use to rendering the HTML elements.
2.         []: Is use to binding properties.
3.         (): Is use to handling your events.
4.         [()]: Is use to data binding.
5.         *:  Is use to asterisk Operations like *ngFor="let item of items; let i=index;”
The templates can be inline or external separate files.

Stayed Informed Bindings in Angular 2

How to use {}, [], [] and [()] in Angular2 Template?

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

What are differences of using template and templateUrl in Angular 2 Component?
Angular 2 template vs. templateUrl?
When using template vs. templateUrl?

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.

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.

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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions