Angular 5 Interpolation, Property Binding & Event Binding

Previously:

Now in this part of the blog:

Interpolation: 

When we change some property from the component class to template we use interpolation.

Example: 

  • In the /src/app/home.component.html
  • Let us add an expression {{itemName}} so code looks like
    • <p>
      home works!
      </p><p>{{itemName}}</p>
  • Now in the /src/app/home.component.ts
  • Let us add code so it look like
    • import { Component, OnInit } from ‘@angular/core’;@Component({
           selector: ‘app-home’,
           templateUrl: ‘./home.component.html’,
           styleUrls: [‘./home.component.scss’]
      })
      export class HomeComponent implements OnInit {   itemName=”Apple”; //itemName added

         constructor() { }

         ngOnInit() {
         }

      }

       

  • Now in the /src/app/app-routing.module.ts lets add code for Route like:
    • const routes: Routes = [
      {
           path:”,
           component: HomeComponent
      }];
  • Now in the /src/app/app.component.html remove everything except the last line:
    • <router-outlet></router-outlet>
  • Now run the application using command
    • $ ng serve
  • Browse the url browser (default url is http://localhost:4200/)
  • You can see:
    • home works!Apple 

Property Binding:

  • In the /src/app/home/home.component.html add a button
    • <input type=”button” value=”Change Item Name”>
  • Run the application and see the screen you will have a button with text “Change Item Name”
  • Now let us change the code for button with
    • <input type=”button” [value]=”buttonText”>
  • In the /src/app/home/home.component.ts add “buttonText” with a value say “Change Name”
    • export class HomeComponent implements OnInit {
          itemName=”Apple”;
          buttonText=”Change Name”;  //Added value for the button text
         
          constructor() { }
          ngOnInit() { }
      }
  • Run the application and check it again you will find the button name changing this is a process of Property Binding

Two-way Binding:

Say you want to take a data and set data from and to an input box using component class then you use Two-way Binding.

  • In the /src/app/app.module.ts add the FormModule module to use ngModel as:
    • import { FormsModule } from ‘@angular/forms’;@NgModule({

      imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule // Add the FormsModule here
      ],

       

  • Now in the /src/app/home/home.component.html add a text box and bind it to itemName
    • <input type=”text” name=”item” [(ngModel)]=”itemName”>
  • Run the application and see that the textbox gets the same value in the itemName
  • When changing the data in textbox and you will see that the <p> tag binded with itemName is also changing.
  • So this is a Two-way binding

 

Next we will check Routing in Angular 5. Click Here

Advertisements

4 thoughts on “Angular 5 Interpolation, Property Binding & Event Binding

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s