Databinding for Angular Novices

Kagula

Mar-8-2023

Introduction

        Introduce data binding in the Angular framework by examples.

Environment

• Visual Studio Community 2022 (Version 17.5.0)
• Angular CLI: 15.2.1
• Node: 18.14.2
• Package Manager: npm 9.5.0
• OS: win32 x64

Content

Simple Databinding

Step1: New the project

        Create a new project with the template of "Standalone TypeScript Angular Project" with the default settings.

Step2: Import the module for the forms of Angular for HTML

        Open the file app.module.ts and insert the new statement like below.

Pic1. app.module.ts

Step3: Prepare data for data binding examples

        Open the file app.component.ts, and change the code according to the below

export class AppComponent {
  title: string = 'angularDemo';
  imgSrc: string = 'assets/portrait.jpg';

  //Below Snippet is for Template Reference Variable Example
  handleClick(inputTxt: any) {
    //You will see the log in the console of Chrome if you click the button.
    console.log(inputTxt);
  }
}

        Putting portrait.jpg under the assets folder.

 Step4: Binding data in HTML file

        Open the file of app.component.html, and change the code according to the below

<div class="content" role="main">
  <h1>Property Binding Example</h1>
  <h2 [innerHtml]="title"></h2>
  <img [src]="imgSrc" />

  <br />

  <h1>Two-way Binding Example</h1>
  <input [(ngModel)]="title" />
  <p>{{title}}</p>

  <br />

  <h1>Template Reference Variable Example</h1>
  <input type="text" #tempRefVal />
  <button (click)="handleClick(tempRefVal.value)">Click Template Ref Var</button>
</div>

Last Step: Run it 

Pic2. Simple data binding

Binding data to the table (ngClass, ngStyle)

Step1 and 2: as in the previous example.

Step3: Prepare backend data

        Modify the app.component.ts file according to the source code below.

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


interface Person {
  id: number,
  name: string,
  age: number,
  gender: boolean
};


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'ngClassOfAngular';

  people: Person[] = [
    { id: 1, name: 'kagula', age: 16, gender: true },
    { id: 2, name: 'inuyasha', age: 916, gender: true },
    { id: 3, name: 'kagome', age: 16, gender: true },
    { id: 4, name: 'kikyou', age: 657, gender: false },
    { id: 5, name: 'sesshoumaru', age: 1001, gender: true },
  ];

}

Step4: Add new style class to CSS file

        Add the source code below to the app.component.css file.

.cool-bool {
    background:#8094ff;
}

Step5: Modify the HTML file

        Removing some useless snippets and adding the following source code for the app.component.html file.

<h2>Style Class Example 1-1</h2>
  <table>
    <thead>
    <th>id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of people; let i = index">
        <!-- if person.gender is true, then use cool-bool style that is defined in the CSS file. -->
        <!-- Here, it is the first form -->
        <td [class.cool-bool]="person.gender">{{person.id}}</td>

        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.gender}}</td>
      </tr>
    </tbody>
  </table>

  <br />

  <h2>ngClass Example 1-2</h2>
  <table>
    <thead>
    <th>id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of people; let i = index">
        <!-- if person.gender is true, then use cool-bool style that is defined in the CSS file. -->
        <!-- Here, it is the second form, the result is as same as the previous example. -->
        <td [ngClass]="{'cool-bool':person.gender}">{{person.id}}</td>

        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.gender}}</td>
      </tr>
    </tbody>
  </table>

<h2>Style Example 2-1</h2>
  <table>
    <thead>
    <th>id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of people; let i = index">
        <!-- if person.gender is true, then use cool-bool style that is defined in the CSS file. -->
        <!-- Here, it is the second form. -->
        <td [style.backgroundColor]="(person.gender?'#BF40BF':'')">{{person.id}}</td>

        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.gender}}</td>
      </tr>
    </tbody>
  </table>

  <h2>ngStyle Example 2-2</h2>
  <table>
    <thead>
    <th>id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of people; let i = index">
        <!-- if person.gender is true, then use cool-bool style that is defined in the CSS file. -->
        <!-- Here, it is the second form. -->
        <td [ngStyle]="{'backgroundColor':(person.gender?'#BF40BF':'')}">{{person.id}}</td>

        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.gender}}</td>
      </tr>
    </tbody>
  </table>

Last step: Run it

Pic3. ngClass and ngStyle Examples 

Reference

• <<Angular For Beginners - 3. Property Binding>> Teddy Smith