Model driven form in Angular2 with FormBuilder

Add this code in ts file Now updated to Angular4 import { Component, OnInit } from ‘@angular/core’; import { FormGroup, FormControl, FormBuilder,Validators } from ‘@angular/forms’; @Component({ selector: ‘app-modeldrivenformbuilder’, templateUrl: ‘./modeldrivenformbuilder.component.html’, styleUrls: [‘./modeldrivenformbuilder.component.css’] }) export class ModeldrivenformbuilderComponent implements OnInit { formValue:…

Model driven form in Angular2

First add this code in app.module.ts import ReactiveFormsModule from form module and then add in NgModule import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import {ReactiveFormsModule} from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; @NgModule({ imports:…

Template driven form in angular2

then code in all app.component.ts file Now updated to Angular4 import { Component } from ‘@angular/core’; @Component({ selector: ‘app-templatedrivenform’, templateUrl: ‘./templatedrivenform.component.html’, styleUrls: [‘./templatedrivenform.component.css’] }) export class TemplatedrivenformComponent { onSubmit(value:any){ alert(“Check console or form value”) alert(value.name) console.log(value.name) } } Finally create…

Two way data binding in angular2

First we have to include form module in app.module.ts //app.module.ts import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { AppComponent } from ‘./app.component’; import { FormsModule } from ‘@angular/forms’; @NgModule({ imports: [ BrowserModule,FormsModule ], declarations:…

How to create nested component in Angular 2

First creat a file with nested.component.ts import { Component} from ‘@angular/core’; @Component({ selector: ‘nested’, template: ‘<h1>Nested World</h1>’ }) export class NestedComponent { } app.componenet.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘my-app’, template: ‘<h1>Hello World</h1> <nested></nested>’, }) export class…