Please enable JavaScript.
Coggle requires JavaScript to display documents.
NaeemAngular, NG Basics, Data Binding & Component - Coggle Diagram
Naeem
Angular
0. The Basics
1. Component
DataBinding
2. Directives
3. Services &
Depy Injection
4. Routing
5. Observables
7. Pipes
6. Forms
8. HTTP
9. Authentication
10. Optimizatin
& Navigation
11. Deployment
NG Basics
Concepts
Property Binding
eg: [ status ] = "flag"
Two way binding
[(ngModel)]="serverStatus"
String
Interpolation
eg: {{ name }}
Event Binding
eg: (click)="onClickEvent()"
or
eg: (click)="onSomeEvent
($event)"
where $event is dom element
4. Directives:
Instructions in Dom
Components
are dirs with template
Examples
1. Structural Di
r:
ngIf,
ngElse,
ngFor
, ngSwitch
2
. Attri /CSS Dir
: ngStyle, ngClass
Routing
a. Define URL(views)
b. Create Compo for those views
c. Bind URL's to Compo
Commands
Create New Project:
ng new my-project
Create New Component
ng g c <componentName>
Run the App
ng serve
Create Pipe
ng g pipe <PipeName>
Entry Point Class:
main.ts
Invokes:
platformBrowserDynamic().bootstrapModule(AppModule)
App.ts is triggered by above import
Data Binding &
Component
Exposing Properties
to Parent Component
Use Annotatoin
Input