Welcome to the free & complete Angular Tutorial. Learning Angular is hard sometimes, but it doesn’t have to be.

In this post, I am going to explain the different ways of displaying data in Angular. This is pretty interesting, so go through each way of displaying data in Angular and comment your favorite one.

1. String interpolation

  • By default, interpolation uses double curly braces, {{ and }}.
  • Embedding expressions / component property / hard coded data in within {{ }} renders value on UI.
  • Angular replaces the “name” with the string value of the corresponding component property.

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html:

Welcome {{ name }}

2. Property binding:

  • Map DOM properties (id, innerHTML etc.,) with component property.
  • Surround DOM properties with square brackets and assign component property to it.

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html:

Welcome <span [innerHTML]="name"></span>

3. Attribute binding:

  • Some HTML attributes don’t have corresponding DOM properties; for example, aria-*.
  • These attributes need to be prefixed with ‘attr’ to bind in Angular.

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 header: string = 'This is a header';
}

app.component.html:

<h1 [attr.aria-label]="header">Welcome to Angular</h1>

4. JavaScript Binding (2 way):

  • Without ngModel, we can bind the value between Component property in Typescript with an UI element.
  • Based on User action, binding conveys information about the event, that includes data keyed-in / entered by User through $event.

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string = "Udhay";

  assignName(event) {
    this.name = event.target.value;
  }
}

app.component.html:

Welcome {{ name }}

<p>
    <input  [value]="name" (input)="assignName($event)"/>
</p>

5. Ng Model (1 way binding):

  • Yay Power of ngModel.. 💪 It helps in fetching the value of UI control in more efficient way. Assign ngModel put with in Square bracket with component property in an Form control of your wish.
  • Make sure you imported FormsModule in your root module, obviously app.module.ts to use ngModel.
  • This will fetch data from UI to Controller, which is One way..

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html:

Welcome {{ name }}

<p>
  <input  [ngModel]="name"/>
</p>

6. Ng Model (2 way binding):

  • Yay Power of ngModel again.. 💪 but this time it’s gonna be used for two way binding. It helps in fetching the value in bidirectional way, yes from UI to component and vice versa.
  • Make sure you imported FormsModule in your root module, obviously app.module.ts to use ngModel.
  • Based on User action, binding conveys information about the event, that includes data keyed-in / entered by User through $event.

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Udhay";

  assignName(str) {
    this.name = str;
  }
}

app.component.html:

Welcome {{ name }}

<p>
  <input  [ngModel]="name" (ngModelChange)="assignName($event)"/>
</p>

7. Ng Model – Banana in a Box (2 way binding):

  • Yay Power of ngModel again.. 💪 but this time it’s gonna be used for two way binding. It helps in fetching the value in bidirectional way, yes from UI to component and vice versa.
  • Make sure you imported FormsModule in your root module, obviously app.module.ts to use ngModel.
  • Two way binding is achieved easily by putting component property within [( )], which looks like banana in a box.

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html:

<hello name="{{ name }}"></hello>
<p>
  <input  [(ngModel)]="name"/>
</p>

If you find this article useful, please feel to share it with your friends / colleagues. Thanks for reading!