Scribd
Upload
7 views6 pages

Angular Notes

The document explains data binding in Angular, detailing one-way and two-way data binding methods, including string interpolation, property binding, and event binding. It also covers routing, including simple routing, lazy loading, and the use of routerLink versus href for navigation. Additionally, it describes the creation of modules and components, emphasizing the importance of lazy loading to enhance application performance.

Uploaded by

sanapvishal1434
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views6 pages

Angular Notes

The document explains data binding in Angular, detailing one-way and two-way data binding methods, including string interpolation, property binding, and event binding. It also covers routing, including simple routing, lazy loading, and the use of routerLink versus href for navigation. Additionally, it describes the creation of modules and components, emphasizing the importance of lazy loading to enhance application performance.

Uploaded by

sanapvishal1434
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Data Binding - Data binding is the process of transmission of data from .

ts file to DOM and


DOM to .ts.

It has two types as -

1 >>> One Way Data Binding ---

Transfering of data from .ts file to DOM only is known as one way data binding.

It has fallowing sub Types --

1 ... String Interpolation >> {{ }}

By using String Interpolation we can access any property value defined in .ts file to DOM.

Case1--

we cant use typeof() operator inside {{}};

Case2--

we can perform arithematic operation inside {{ }} <<--(symbol of StringInterpolation)

Case3--

we cant use assignment operator inside the {{ }} i.e. we cant assign value from DOM.

Case4--

we can use equality operator inside the {{}}..(==,===)

2 ... Property Binding >> []

By using property binding we can assign or provide value to html attribute like value
attribute..

Example: <input type="text" [value]="myvalue"> ...(.html file)

myvalue="Enter text here" ....(.ts file)

3 ... Event Binding >> [()]


By using Event binding we can perform some action based on some events like
click,blur,focus..

Example: <button (click)="Test()">click</button>

in above example after clicking on buttton,Test() method get executed after clicked.

value = 555;

Test(){

console.log(this.value);

2 >>> Two Way Data Binding ---

Transfering of data from .ts file to DOM and DOM to .ts file is known as two way data
binding.

we use [(ngModel)] directive for two way data binding available in forms module and
forms module available

in forms package for two way data binding.

Example: <input type="text" [(ngModel)] ="twodatabinding()"> ...(.html file)

twowaydatabinding= 555; ....(.ts file)

<button (click) = "Test()" >click..</button> ...(.html file)

Test(){

console.log(this.twowaydatabinding);

}
Routing >>

Routing in Angular allows the users to create a single-page application with multiple views
and allows navigation between them.

Simple Routing --

1) By using selector -

In this case we copy the selector from .ts file and paste it into the .html file,depends ont the
position where its

placed ,they execute that wise.

Example --

suppose we have created login component,when we entered into .ts file we get selector as

Selector : app-login,

now we have to just copy that "app-login" selector and paste it into the .html file in "<>".

as--

<h2>This is component html file</h2>

<app-login><app-login>

Now the code available in login component will get executed once current file execution is
done.

2) By using anchor tag and router outlet--

1) In this case first we "router-outlet" directive in the root .html file

2) After that we will set path routing.module.ts file by using path and component as key
with values.

3) In last step we have to use anchor tag with routerLink to provide path to the routerLink
that just we defined in the routing.module
But in this case when we have lots of componet are there like more 50 then we should not
prefer this routing as our application

may gets freezed or slowdown.

To avoid freezed effect, lazy loading concept back into the picture-

Lazy Loading--

first upall we have to create module -

>> what is module-


Module in Angular refers to a place where you can group the components, directives, pipes,
and services,

which are related to the application.

>> What is component-


Components are the main building block for Angular applications. Each component consists
of: An HTML template

that declares what renders on the page ...

Some commands that may we use in next phase-

1) for component creation we use -- ng g c name

2) for module creation we use -- ng g m name --routing

The main purpose of lazy loading is to avoid the slowness of application now question
comes to our mind that how?

>> the simple way is to create new module in that new module we again create some
component,directives and pipes.

to create module we have seen above command

ng g m name --routing

Example --
Step 1) Create Module -- ng g m admin --routing

Step 2) Create component inside that module -- 1) ng g c adminlogin

2) ng g c adminsignup

Step 3) we have create path in root routing.module.ts as we created new module but to
access that module form current we have to increase

the scope of current module for that we create path inside the "routing.module.ts" as -

{path:'admin'
loadchildren:()=>import('./admin/admin.module').then(mod=>mod.AdminModul)}

>> What is the difference between href and routerLink?

<h2>This is app component html file</h2>

<!-- <a href="login">Click here for login</a> //when we use href for routing it will refresh

whole page so to that we use "routerLink" instead of "href" -->

<a routerLink="login">login component</a><br><br> // Not refresh whole page

<a href="signup">signup component</a><br><br> //Refresh whole page

<router-outlet></router-outlet>

>> What is "router-outlet" ?


router-outlet is an directive available inside router library used for inserting component
matched by "routes" to be display on screen.

In short it helps to display component that we are define in the routing.module.ts "path",on
the screen.

Back to Lazy Loading...


...Now we have to use that path through button or anchor tag so that we will redirect to the
distination module components.

Example--

<button routerLink="admin/adminLogin">admin login</button><br><br>


<<(app.component.html)

<button routerLink="admin/adminsignup">admin signup</button><br><br>

<router-outlet></router-outlet>

we need to create path in "admin.routing.modul.ts" for "adminlogin" and "adminsignup"


and run the code..

By using global component "home" we can also redirect to the admin module as--

1) Firstupall create home component using >>> "ng g c home"

2) Now set path for home in "app.routinng.module.ts" as--


{path:'',component:HomeComponent}

3) Kept only router-outlet directive in the "app.component.html" i.e. root file.

4) Create button or anchor tag inside the home which directing towards admin module as
>>

<button routerLink="admin/adminLogin">admin login</button><br><br>

<button routerLink="admin/adminsignup">admin signup</button><br><br>

most important dont forget to use--

<router-outlet> inside the home.html else it may not get directed to the admin module.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy