1. Write a Program to enter length and breadth and calculate area of rectangle width = input("Enter the width = ") length = input("Enter the length = ") area = float(width)*float(length) print("Area is = {0}".format(area)) 2. Write a Program to enter radius of circle and calculate area of circle import math radius = input("Enter the Radius = ") area = float(radius)*float(radius)*math.pi print("Area is {0}".format(area))

Import Form module In Component create the variables in ts /class file set input with ngModel import { Component } from '@angular/core'; @Component({ selector: 'app-my-component', styleUrls: ['./my-component.component.css'], template: ` Name: <input type="text" [(ngModel)]="myData.name"> Age: <input type="number" [(ngModel)]="myData.age"> ` }) export class MyComponent { myData = { name: '', age: ''} }

Import Reactive Form module In Component create the form in ts class file set input with formControl import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ // other imports ... ReactiveFormsModule ], }) export class AppModule { } // Main module import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent { detailsForm = new FormGroup({ name: new FormControl(''), age: new FormControl(''), }); }

formControl is instance for a form element class(object). used for get and set value and validation. have methods like — setValue, patchValue, getRawValue, setValidators, setAsyncValidators, removeValidators , clearValidators, markDirty, markPristine, updateValueAndValidity, setError, getError, setError, hasError, getError etc,….

ngModel- form Directive of template driven form (two way data binding not technically but for understading,) — ngModel is directive manage a form input or control <input type="text" [(ngModel)]="favoriteColor" in ts file create a variable for binding async value “ favoriteColor”

here is routing Routes = [{ path: 'owner', component: OwnersLeadComponent, children:[ { path: '', component: OwnerStartComponent }, { path: ':id', component: OwnerDetailsComponent }, { path: 'new', component: OwnerUpdateComponent }, { path: ':id/new', component: OwnerUpdateComponent }, ] }]; in address bar

Reactive form Template driven form

We need forms Module- two types Reactive — ReactiveFormsModule Template driven — FormsModule import { ReactiveFormsModule } from '@angular/forms'; or import { FormsModule } from '@angular/forms'; NgModule({ declarations: [ ...... ], imports: [ .... ReactiveFormsModule, ...... or FormsModule ........ ], providers: [], bootstrap: [AppComponent], exports:[] }) export class AppModule { }

To navigate programmatically you need inject router service then call navigate function import {Router} from '@angular/common/router' . . . constructor(private router: Router){} ..... //in some method .... . . . this.router.navigate(['/property']);