# Displaying data in Angular explained 🔥

Welcome back to another short and insightful post on Angular.

I am going to explain the different ways of binding data in Angular and they are pretty interesting stuff.

Comment your favorite binding in the comments below!

### 1. String Interpolation

* By default, interpolation uses double curly braces, {{ and }}.
* Embedding expressions / component property / hardcoded data within {{ }} renders value on UI.
* In the below example, 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 }}
```

Run on  [Stackblitz](https://stackblitz.com/edit/string-interpolation-example?embed=1&file=src/app/app.component.ts) .

### 2. Property Binding:

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

`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>
```

Run on  [Stackblitz](https://stackblitz.com/edit/ng-property-binding-example?embed=1&file=src/app/app.component.html).

### 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>
```

Run on  [Stackblitz](https://stackblitz.com/edit/ng-attribute-binding-example?embed=1&file=src/app/app.component.ts).

### 4. JavaScript Binding  (2 Way):

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

`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>
```

Run on  [Stackblitz](https://stackblitz.com/edit/ng-event-binding-2-way?embed=1&file=src/app/app.component.ts).

### 5. ngModel (1 Way Binding):

* Yay Power of ngModel. 💪 It helps in fetching the value of UI control in a more efficient way. Assign component property to ngModel. 
* Make sure you import FormsModule in your root module, as ngModel needs this module.
* 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>
```

Run on  [Stackblitz](https://stackblitz.com/edit/ng-model-1-way?embed=1&file=src/app/app.component.html).

### 6. ngModel (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 a bidirectional way, yes from UI to component and vice versa.
* Make sure you import FormsModule in your root module, as ngModel needs this module.
* Based on User action, `ngModelChange` event binding conveys information about the event to the component, which 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>
```

Run on  [Stackblitz](https://stackblitz.com/edit/ng-model-2-way?embed=1&file=src/app/app.component.html).

### 7. ngModel - 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 a bidirectional way, yes from UI to component and vice versa.
* Make sure you import FormsModule in your root module, as ngModel needs this module.
* Two-way binding is achieved easily by putting component property within [( )], which looks like a 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>
```

Run on  [Stackblitz](https://stackblitz.com/edit/banana-in-a-box?embed=1&file=src/app/app.component.html).

Hope you find this article useful, please feel free to share it with your friends/colleagues.

If you got any questions, feel free to post them in the comments section down below.

Happy learning!

I tweet a lot about Web development, Java, and Productivity Hacks, so feel free to follow me on Twitter at  [AskUdhay](https://twitter.com/AskUdhay).

Here is one of my recent tweets:

%[https://twitter.com/AskUdhay/status/1408415572488974338]