[Solved] Converting from angular I to Angular 2 [closed]

Question

I know it’s been a downvoted question but I would still like to provide you an answer.

For the above html, you can create something similar in angular 2 as:

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

An html file with form:

app.component.html

<div class="container">
  <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
    <input name="first" ngModel required #first="ngModel">
    <input name="last" ngModel>
    <button>Submit</button>
  </form>

  <p>First name value: {{ first.value }}</p>
  <p>First name valid: {{ first.valid }}</p>
  <p>Form value: {{ f.value | json }}</p>
  <p>Form valid: {{ f.valid }}</p>
  <p>The result is : {{f.value.first * f.value.last}}</p>
</div>

To render this app component, you’ll add below tag in index.html:

<body>
  <app-root>Loading...</app-root>
</body>

I have provided the answer in a form as it seemed more relevant example to take.

You can see:

There is not ng-controller now, it has component which will have the controller logic in it.
There is no $scope

I have taken example from Angular.io website which has good documentation

I would strongly suggest you to start your Angular journey from this book which is free and it really really good

You can also get some simple examples over my git for Angular

Side Note : The angular has no similarity with AngularJS 1.X so I strongly suggest you to understand component based architecture of Angular2 and start rewriting codes in that way.

Accepted Answer