Tuesday, 2 January 2018

String interpolation in angular 5

In this lesson i will show you how to change the content of your component dynamically using angular.

String interpolation in angular 5


Note : when we are mention angular.js it means we are talking about angular 1 and angular means the new version of angular which is 2 and now 5.

After installing angular 5 in your machine lets create a new component.


ng generate component server

or 

ng g c server

it will generate the file in you src/app/server directory.

Now open server.component.ts

In this file we will change the serverId and serverStatus dynamically . Here i take these argument value static but it change dynamically also.

here we create the properties by specifying the types using TypeScript in this way.

    serverId : number = 10;
    serverStatus : string = 'offline';


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

@Component({
    selector:'app-server',
    templateUrl:'./server.component.html',
})
export class ServerComponent {
    serverId : number = 10;
    serverStatus : string = 'offline';

    getServerStatus(){
        return this.serverStatus;
    }

}

In server.component.html, we will be using double curly braces {{}} which will enable us to type TS expressions in between. {{}} is used for the string interpolation in angular.

open the server.component.html

<p>The {{ 'server' }} component id is {{ serverId }} and status {{ getServerStatus() }}.</p>

Now string interpolations display the value {{ 'server' }} and {{ serverId }} . we can use {{ 'server' }} or without '' {{ server }}.

The next thing is to add the component tag in your main app.component.html file.


<app-server></app-server> 

Now Run your app and navigate to the browser.

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts