angular js_1

v1:--

 angular js:---

framework to build client side applications.

Part of the page reload asynchronously without reload full page

use for SPA(Page is not reloading)

modular approach

Reusable code 

development quicker and easier:--inbuilt capability validation /routing

Unit testable

Google+Microsoft(typescript)

2010:--angular js

2016:angular v-2

................................................................................

v-2:--

prerequistis:--html,css,js,basic typescript[es15]

devloment environment:--node npm angular cli

check version:--node -v

angular cli:--

its  command line interface for angular.it allows you Generate building blocks for your angular  application.it makes development quicker and easier.

setup run module routes can be added by using cli.

install:--

npm install -g @angular/cli

specific version install:--

npm install -g @angular/cli@10.0.0ex..

you can install two version of angular by using nvm

:node version manager can be used..

ng  version to check version.

new project:--ng new projectname

ng serve run the web page

architecture:--

module:--

user:--application of user

admin:admin module realated to admin

root module:--app

components:--one side bar one app[root component]

:-html/class included

module:--component&services&pips,interfaces

Group of functionality:--

user Auth:--

Login register ForgetPassword api call helpers

How to create module:--

Appmodule is the master...

ng generate module userAuth..

then multiple component can be created..

in app module add it

import {} from './user-auth/user-auth.module'

imports:[

userAuthModule

]

ng generate component user-auth/login

 exports:[

LoginComponents

]

services:--business logic

modules interact and ultimately render the view in the browser.

package.json:-dependency and dev dependencies

src:--main.js entry file

app:--app.module

app.component

class:-appcompoent.ts&appcomponent.html

..........................................................................................

component:--

3 parts:

template:

view html

class:

code typescript/data&methods

metadata:

information

decorator:-

function that provides information about the class that attached to it

run:--index.html:--<app-root></app-root>[it replaced]

new component:--

ng g c nameofcomponent

as a tag used:--appcompoent.html:--<app-test></app-test>

ng serve 

selector:--

selector:'.name'

<div class="app-test"></div>

selector:[]

<div app-test></div>

templateurl:-

template:'<div>inline template</div>'

......................................................................................

file and folder structure:--

package.json:

detail of the  project [deleted so application will not run]

node_modules:-all library[angular]

src:--component:--app

assets:-extra css/images

environments:-building

index.html:-

main.js: its bootstrap[html and angular collect]:-angular app

style.css:-style

....................................

package.lock.json:-

detailed info of packages[if deleted so angular app will run]

angular.json:-

application configuartion

tsconfig.json:-

typescript info:

target area

browserlistrc:

browserlist info...

karma.config.ts:

testing file

...........................................

interpolation:--

to display dynamic data into html:{{  }}

can be shown property and function

angular cli:--

ng generate....no of commands .....

app component is root component...

>for creating component:-ng g c component name

>for creating component:-ng g m modulename:--no of component..like user>

ng g c modulename/component name

build:--ng build[dist/blog>that we put into server to run]

component:---building blocks for specific feature.

appmodule.ts:the component is added there...

72089 96417

for inline style:-

ng g c componentname --inline-style

styles:[

`.custom:{color:red}`

]

<p class="custom">userlist works!</p>

template:--

ng g c componentname --inline-template

template:'<p class="custom">hello gaurav</p>',

  

styles:[

  '.custom{color:red}'

]

ng g c componentname --inline-template --inline-style

data binding:--one way data binding/two way data binding

Style binding:-----

[style.color]=" color"

.............................................................

function calling:----[event binding]

<button (click)="getdata(10)">click here</button>

getdata(nm:number){

    alert("good morning"+nm);

  }

keyup:-----

<input type="text" name="" #box1 

(keyup)="getInput(box1.value)">

getInput(nm:any){

    console.log("key"+nm);

  }

keyup and keydown difference:---

same key if you press and same key not press......

keydown==input

blur event,mouseover,mouseleave

..............................................................................................................................

style.css:--for multiple component[as a global css]

inline css is same as html css

inline style has higher property

..............................................................................................................................

Data binding:---

component===view communication

ts[component]-------html[view]

two ways:

One Way Data Binding:--

Ts:---->HTml/Html--->Ts

1.string interpolation{{}}

2property binding [property]='data'

[class]="value"

jis bhi property m value pass karne h put into [] bracket

Html<---->Ts

[(ngModel)]='data'

propertybinding:====

[name]=value{with the properties}

                                                     3...using signal[angular 17 added]

in ts file:--

{{firstName()}}

.......................................................................

ngif:---

<h1 *ngIf="showData">Gaurav Pandey</h1>

...ngif else

<h2 *ngIf="showData1 else elseBlock">GauravPandey</h2>

<ng-template #elseBlock>

    <h2>no Gaurav</h2>

</ng-template>

<span *ngIf="showData1,then ifBlock else elseBlock"></span>

<ng-template #ifBlock>

    <h2>helloGaurav</h2>

    </ng-template>

<ng-template #elseBlock>

    <h2>no Gaurav</h2>

</ng-template>

ngswitch:--

 <!-- ngswitch -->

    <div [ngSwitch]="color">

<h1 *ngSwitchCase="'green'" style='color:red'>hello sir</h1>

<h1 *ngSwitchCase="'pink'" style='color:pink'>hello sir</h1>

    </div>

.......................................................................

 <!-- ngswitch -->

    <div [ngSwitch]="color">

<h1 *ngSwitchCase="'red'" style='color:red'>hello sir</h1>

<h1 *ngSwitchCase="'pink'" style='color:pink'>hello sir</h1>

<h1 *ngSwitchDefault>unknown color</h1>    

</div>

<!-- ngclass -->

<button (click)="showColor('red')">Red</button>

    <button (click)="showColor('pink')">pink</button>

    <h1 >gaurav pandey{{color1}}</h1>

 showColor(nm:string){

this.color1=nm;

this.color=nm;

  }

color="pinku";

 color1="black";

ngfor:---

<!-- ngFor -->

    <div>

        

            <ul *ngFor="let item of address">

                <li>{{item}}</li>

                </ul>

                <ul >

                    <li *ngFor="let item1 of userdata">{{(item1.name)}}

                        {{(item1.class)}}

                    </li>

                    </ul>

        

    </div>

htmlfile:

address=['gurgram','noida','up','uttarakhand'];

 userdata=[

   {name:'gaurav',class:'mca'},

   {name:'rajesh',class:'btech'},

   {name:'deepak',class:'mba'}

 ]

nested for:

userdata=[

   {name:'gaurav',class:'mca',hobbies:['playingcricket','music','singing']},

   {name:'rajesh',class:'btech',hobbies:['playingcricket','music','singing']},

   {name:'deepak',class:'mba',hobbies:['playingcricket','music','singing']}

 ]

    <!-- ngFor -->

    <div>

        

            <ul *ngFor="let item of address">

                <li>{{item}}</li>

                </ul>

                <ul *ngFor="let item1 of userdata">

                    <li>{{(item1.name)}}

                        {{(item1.class)}}

                        <ul>

                            <li *ngFor="let h of item1.hobbies">{{h}}</li>

                        </ul>

                    </li>

                    </ul>

        

    </div>

.........

style binding

<button (click)="showColor('red')">Red</button>

    <button (click)="showColor('pink')">pink</button>

    <h1 [style.color]="color1">gaurav pandey{{color1}}</h1>

...................

nested style binding

    <h1 [style.color]="color1" [style.backgroundcolor]="">gaurav pandey{{color1}}</h1>

...........................

Formmodule:--

in module  we have to import:--

two types:

Template driven form

Reactive form

<div>

    <form action="" #basicForm="ngForm" (submit)="getFormData(basicForm.value)">

        <div>

            <label for="Email">Email</label>

            <input type="email"  name="nm" ngModel   placeholder="email">

        </div>

        <div>

            <label for="Password">Password</label>

            <input type="password" ngModel name="pwd"  placeholder="email">

        </div>

        <div>

            <button>Login</button>

        </div>

    </form>

</div>

 getFormData(data:NgForm){

console.log(data);

  }

Template driven form validation:--

<div>

    <form action="" #basicForm="ngForm" (submit)="getFormData(basicForm.value)">

        <div>

            <label for="Email">Email</label>

            <input type="email" required #email="ngModel"  name="nm" ngModel   placeholder="email">

        <span *ngIf="email.invalid &&email.touched" style="color:red">Please Enter Email</span>

        </div>

        <div>

            <label for="Password">Password</label>

            <input type="password" required #pwd="ngModel" ngModel name="pwd"  placeholder="password" pattern="[a-z 0-1]+$">

        <span *ngIf="pwd.invalid &&pwd.touched" style="color:red">

            Please enter password

        </span>

        </div>

        <div>

            <button [disabled]="basicForm.invalid">Login</button>

        </div>

    </form>

</div>

......

https://stackoverflow.com/questions/70106472/property-fname-comes-from-an-index-signature-so-it-must-be-accessed-with-fn

 

let clarify what is the issue. We are talking about a template-driven form validation. You need to validate something, let's say to ensure that a field is required (call it firstName). Note that from Angular v13, it changed a bit from an old code like this:

<div *ngIf="firstName.errors?.required">First Name is required</div>

to this

<div *ngIf="firstName.errors?.['required']">First Name is required</div>

<div>

    <form action="" #basicform="ngForm" (submit)="getFormData(basicform.value)">

<label for="name">Enter Name</label>

<input type="text" name="nm" required  ngModel #name1="ngModel"

pattern="[a-zA-Z]+$" 

>

<div *ngIf="name1.touched">

    <p *ngIf="name1.errors?.['required']">name is a required field!</p>

    <p *ngIf="name1.errors?.['pattern']">This is not a valid name!!!</p>

  </div>

<br/>

<label for="password">Enter Password</label>

<input type="password" name="pwd" required

#pwd="ngModel"

ngModel>

<span *ngIf="pwd.invalid &&pwd.touched">password is required</span>

<br/>

<input type="submit" value="save" [disabled]="basicform.invalid">

    </form>

</div>

Reactive Form:------

app.Module.ts

import { ReactiveFormsModule } 

from '@angular/forms';

component.ts:

import { FormGroup,FormControl } 

from '@angular/forms';

Form Group:handles the complete from.

Form Control:-specifically handle the specific field.

loginForm=new FormGroup({

    email:new FormControl(''),

    password:new FormControl('')

  })

getData(){

  console.warn(this.loginForm.value);

  

}

html:

<form [formGroup]="loginForm" 

(ngSubmit)="getData()">

        <label for="email">Email</label>

        <input type="text" name="" id="" 

formControlName="email">

        <br>

        <label for="password">Password</label>

        <input type="password" name=""

 id=""formControlName="password">

        <br>

        <button>submit</button>

    </form>

validation react form:----

    <form [formGroup]="loginForm" 

(ngSubmit)="getData()">

        <label for="email">Email</label>

        <input type="text" 

 formControlName="email">

        <span *ngIf="email &&email.invalid 

&&email.touched"

        style="color:red">Please fill email</span>

        <br>

        <label for="password">Password</label>

        <input type="password" name="" id=""

 formControlName="password">

        <span *ngIf="Password 

&& Password.invalid

        &&Password.touched  

        " style="color:red">password is requied

</span>

        <br>

        <button [disabled]="loginForm.invalid">

submit</button>

    </form>

ts file:-

import { FormGroup,FormControl,Validators }

 from '@angular/forms';

loginForm=new FormGroup({

    email:new FormControl('',

[Validators.required, Validators.email]),

    password:new FormControl('',

[Validators.required])

  })

getter method-

get email(){

return this.loginForm.get('email');

}

get Password(){

  return this.loginForm.get('password');

}

angular life cycle hooks:--

new component created:-instantiated:--

when <app-><app->

constructor:---ngOnChanges[new component bind input property change()]

ngOnInit:---[]

ngDoCheck:--change detected

ngAfterContentInit:--

ngAfterContentChecked:

ngAfterViewInit

ngAfterViewChecked:

ngOnDestroy