Angular2 project using angular-cli with property and event binding

In this setup I am going to walk-through setting up an Angular2 project using angular-cli. We are then going to create a project and show some simple event and property binding using Angular2 and typescript.

The project

Our project is simple. We will create a simple page with a heading, a label and 3 inputs. These are

1. A page heading showing application state and most recent event
2. A text label that shows value from the underlying component
3. An input text field that also shows an initial value from the underlying component.
4. An input clear button, that clears the value in the underlying component and also the label and input field
5. An input reset button that sets everything back.

To demonstrate, we will load the page, and cycle through the 2 events. Lets get started...

The steps

First lets setup angular-cli

The step to do that is to run the following command in your target folder

sudo npm install -g angular-cli

This will create the appropriate setup ashown below

Next, we will create the project, I call mine "ng2-1". I will use the angular-cli directive "ng new" to create the new project..

ng new ng2-1

This command creates the necessary files needed for setting up the project, as we can see from the screenshot below..

Now that the project is created, we will open the created files in our favourite code editor and take a look at the generated seed project. I use Vscode, an open source editor from Microsoft that is also available for Ubuntu.

We need to add the created project to our editor.. We can do that by Opening the folder we created at the start, using the Open folder command..

Next I navigate to the root folder for the project, and click OK to start working...

We will now navigate to the appropriate files within the created project. This should be within the ./app/src folder, and the two files we will use are called app.component.ts and app.component.html

The presentation logic

The generated project created a app.component.html file which is our root component's html representation. The default setup just created a heading based on the root object's "title" property. We will add additional presentation logic in terms of the following

• A label text "My name is ..." using for the myname property defined in the root object.
• An input text field that takes in its value from the "myname" property defined in the root object (same as the label defined above).
• A Clear button that calls the clearClick() function in the component class when clicked.
• A Reset button that calls the resetClick() function in the component class when clicked.

Let's modify the system generated .html file as follows..Notice how the property binding is done by boxing the attribute in square brackets. The onXXX event is called by surrounding the XXX with parentheses, and calling the method name of the component class.

<h1>
  {{title}}
</h1>
  <label>My name is {{myname}}</label>
  <br/>
  <input name="txtName" type="text" [value]="myname"/>
  <input name="btnClear" type="button" value="Clear" (click)="clearClick($event)">
  <input name="btnReset" type="button" value="Reset" (click)="resetClick($event)">

The above code as shown in my editor

The application logic

The application logic is contained in the file called app.component.ts. The system generated code only has a single property called title, but we will extend the logic as follows:

• A new property called myname
• A constructor that simply logs an event
• A clearClick() method that is called when Clear button is clicked. This logs on the console, sets the myname property to "", marks the clear button as disabled, as well as updates the title property to indicate that Clear button has been clicked.
• A resetClick() method which called when reset button is clicked. This again logs on the console, resets the "myname" property to my name, and updates the title property to indicate that Reset button has been clicked.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  myname = 'Arthgallo';
  isActive=false;
 
  constructor() {
    console.log("Starting now");
  }
  
  clearClick($event) {
    console.log("Clear clicked");
    this.myname = '';
    $event.target.disabled=true;
    this.title="Clear clicked!"
  }

  resetClick($event) {
    console.log("Reset clicked");
    this.myname='Arthgallo';
    this.title="Reset clicked!"
   }
}

This is how the code appears on my screen..

and finally the web page in action. This can be done by entering the command "ng serve" on the command line.

ng serve

By default the webpage can be accessed at http://localhost:4200.. Lets test our property and event binding.

1. Initial load

2. On clicking the clear button

3. And finally the reset button clicked

That's it..