- Angular 2 - Services
- Angular 2 - Nested Containers
- Angular 2 - Lifecycle Hooks
- Angular 2 - User Input
- Angular 2 - Custom Pipes
- Angular 2 - Transforming Data
- Angular 2 - Handling Events
- Angular 2 - Data Display
- Angular 2 - Third Party Controls
- Angular 2 - Advanced Configuration
- Angular 2 - Dependency Injection
- Angular 2 - CLI
- Angular 2 - Forms
- Angular 2 - Navigation
- Angular 2 - Routing
- Angular 2 - Error Handling
- CRUD Operations Using HTTP
- Angular 2 - Data Binding
- Angular 2 - Metadata
- Angular 2 - Directives
- Angular 2 - Templates
- Angular 2 - Components
- Angular 2 - Architecture
- Angular 2 - Modules
- Angular 2 - Hello World
- Angular 2 - Environment
- Angular 2 - Overview
- Angular 2 - Home
Angular 2 Useful Resources
- Angular 2 - Discussion
- Angular 2 - Useful Resources
- Angular 2 - Quick Guide
- Angular 2 - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Angular 2 - User Input
In Angular 2, you can make the use of DOM element structure of HTML to change the values of the elements at run time. Let’s look at some in detail.
The Input Tag
In the app.component.ts file place the following code.
import { Component } from @angular/core ; @Component ({ selector: my-app , template: <span> <input [value] = "name" (input) = "name = $event.target.value"> {{name}} </span> }) export class AppComponent { }
Following things need to be noted about the above code.
[value] = ”username” − This is used to bind the expression username to the input element’s value property.
(input) = ”expression” − This a declarative way of binding an expression to the input element’s input event.
username = $event.target.value − The expression that gets executed when the input event is fired.
$event − Is an expression exposed in event bindings by Angular, which has the value of the event’s payload.
Once you save all the code changes and refresh the browser, you will get the following output.
You can now type anything and the same input will reflect in the text next to the Input control.
![Input Tag](/angular2/images/input_tag.jpg)
Cpck Input
In the app.component.ts file place the following code.
import { Component } from @angular/core ; @Component ({ selector: my-app , template: <button (cpck) = "onCpckMe()"> Cpck Me </button> {{cpckMessage}} }) export class AppComponent { cpckMessage = Hello ; onCpckMe() { this.cpckMessage = This tutorial! ; } }
Once you save all the code changes and refresh the browser, you will get the following output.
![Cpck me](/angular2/images/cpck_me.jpg)
When you hit the Cpck Me button, you will get the following output.
![Cpck me Button](/angular2/images/cpck_me_button.jpg)