Angular - Example 2 - Include Html TextBox Control and Onclick and OnChange Event

1. Create New Project Using Following Cmd - ng new TextBoxCtrl - TextBoxCtrl as Project Name

2. Open Visual Studio Code Application and open project.

3. In index.html file having app-root tag. This app-root tag controls loaded from
'..\src\app\app.component.html' file.

4. selector name is mentioned in '..\src\app\app.component.ts' file. This name to use to call the component.
(Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.)

5. Include html code inside in app.component.html file.

ex : <input type="text" (click)="callfunc()" />

     <input type="text" [(ngModel)]="Name" (change)="change(Name)" />

6. Include below code inside in app.component.ts file.

exsiting page

after code change(marked blue)

7. Include below code inside in app.module.ts file.

exsiting page

after code change(marked blue)

8. And to complie and run this project -- ng serve --o

Output

When i click first text box and shows alert

After typed in text box and leaves from textbox - shows alert with typed text.