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