Category: angular2

Angular 2 Tutorial PDF Version Quick Guide Resources Job Search Discussion Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript. This tutorial looks at the various aspects of Angular 2 framework which includes the basics of the framework, the setup of Angular and how to work with the various aspects of the framework. Other topics discussed in the tutorial are advanced chapters such as interfaces, nested components and services within Angular. Topics such as routing, modules, and arrays are also dealt with in this tutorial. Audience This tutorial is for those who are interested in learning the new version of the Angular framework. The first version of the framework has been there for quite some time and it is only off-late that Angular 2 has become popular with the web development community. Prerequisites The user should be familiar with the basics of web development and JavaScript. Since the Angular framework is built on the JavaScript framework, it becomes easier for the user to understand Angular if they know JavaScript. Print Page Previous Next Advertisements ”;

Angular 2 – User Input ”; Previous Next 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: ” <div> <input [value] = “name” (input) = “name = $event.target.value”> {{name}} </div> ” }) 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. Click Input In the app.component.ts file place the following code. import { Component } from ”@angular/core”; @Component ({ selector: ”my-app”, template: ”<button (click) = “onClickMe()”> Click Me </button> {{clickMessage}}” }) export class AppComponent { clickMessage = ”Hello”; onClickMe() { this.clickMessage = ”This tutorial!”; } } Once you save all the code changes and refresh the browser, you will get the following output. When you hit the Click Me button, you will get the following output. Print Page Previous Next Advertisements ”;