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.

No comments:

Post a Comment

Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications...

Popular