Scribd
Upload
5 views58 pages

1 Setup

The document outlines the setup and basic concepts of Angular, including Node.js installation, data binding techniques (one-way and two-way), and the differences between property and attribute binding. It also discusses the use of safe navigation operators, event binding, structural directives like ngFor and ngIf, and custom directives. Additionally, it covers data sharing between components and the use of services for passing data.

Uploaded by

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

1 Setup

The document outlines the setup and basic concepts of Angular, including Node.js installation, data binding techniques (one-way and two-way), and the differences between property and attribute binding. It also discusses the use of safe navigation operators, event binding, structural directives like ngFor and ngIf, and custom directives. Additionally, it covers data sharing between components and the use of services for passing data.

Uploaded by

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

Setup

• Nodejs installation
• Create one folder and open in vs code
If any error
App.component.ts and html
one way data binding
If change the value in that variable
then error
Two way binding(change the value
in html also possible)
String interpolation
Attribute binding
String interpolation
We can given like this too
string message with variable
But in attribute binding it is not
possible
Property binding
Difference b/w property and
attribute
• Property binding and attribute binding are not same in angular
• Attributes means it is the attributes in html and once initialized,
attribute values do not change
• Property means part of the DOM and values can be modified
• Attributes are defined by HTML and properties are defined by DOM
itself
Now output okay…but when null
value passed??
Now error occured
Safe navigation operator used for
solving this problem
Property binding,safe navigation
operator and lifecycle hook
Event binding
Generate new component and do
this 2 steps
Counter component
Structural directives-ngFor
Access the index by using ‘index’
ngIf
Ngclass
Exercise using ngmodel and ngif
ngModel,ngIf and ngClass
Both are same
ngStyle
Custom directives
For using this directive….
First access in our .ts file and then only use it in
html file of it
If it is empty string then default
color yellow will be applied
Pipes – like inbuilt function
should add CommonModule
Date with time
Slice pipe
In array
uppercase
Currency pipe
Sharing data b/w components
Create list component
Passing data from form component
to app component
Push the value into array which is
received from form
List.ts
Same data passing now done by
service
Pass the value from form.ts to
service
Servive.ts
List.ts

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