Angular setup

Setup to Start Angular

Install Node.js LTS Version

URL: - https://nodejs.org/en/
--Check installed Node.js, npm(Node Package Manager) Version

Open Node.js command prompt=>Type node -v=>Press Enter

Install TypeScript

URL: -   https://www.typescriptlang.org/
Open Node.js command prompt=>Type npm install -g typescript=>Press Enter
--Update TypeScript
Open Node.js command prompt=>Type npm update -g typescript@latest =>Press Enter

Install Angular CLI

Open Node.js command prompt=>Type npm install -g @angular/cli=>Press Enter
--Check installed Angular CLI version
Open Node.js command prompt=>Type ng v=>Press Enter

Install Visual Studio Code editor

URL: - https://code.visualstudio.com/

Setup Done

Basic CLI command to know

1. ng new “Project Name”
2. ng g c “Component Name” or ng generate component “Component Name”
3. ng g c “Parent Component/Child Component” –-Nested Component
4. ng g s “Service Name” or ng generate service “Service Name”
5. ng g cl “Class Name” or ng generate class “Class Name”
6. ng g m “Module Name” or ng generate module “Module Name”
7. ng g p “Pipe Name” or ng g p “Pipe Name”
8. ng serve
9. ng serve –o or ng serve -open

--o means Open in Browser

Common Decorator

1. @NgModule()-to define module
2. @Component()-to define component
3. @Injectable()-to define services
4. @Input() & Output()-to define properties...that send & received data from the DOM

 Type of Decorator

1. Class Decorator -e.g. @Component and @NgModule
2. Property Decorator-for properties inside classes e.g. @Input() & Output()
3. Method Decorator-for methods inside classes e.g. @HostListener
4. Parameter Decorator-for parameter inside class constructor e.g. @Inject

Type of Directives

Directives are elements which change the appearance or behavior of the DOM element. There are 3 types of directives mainly.

1. Component
2. Structural 
3. Attributes

Common features  

1. *ngFor
2. *ngIf
3. Interpolation {{ }}
4. Property binding [ ]
5. Event binding ( )

Angular CRUD(Template Driven Form) example

Angular CRUD(Reactive Form) example