Angular Notes and Cheatsheet and Learning Kit

Angular Required Packages in Any Project.

Installing Angular CLI:

Angular-CLI: npm install -g @angular/cli

To create Your First Angular App:

ng new newapp

Eg:

        $  ng new proj_name

To Run an Angular Application:

1) ng -s -o (Open angular app in browser.)
2) ng -s (Run the angular app.)
3) ng serve --open --port port_number (Open angular app at specified port number.)

Eg:

        $  ng -s -o

To Generate Components:

1) ng generate component component name
2) ng g c component name

To generate module

ng generate module service module name  
ng g module module name

To generate interface:

 ng generate interface interface name
 ng g interface interface name

To generate service:

ng generate service service name
ng g service service name   

To generate guard:

ng generate guard guard name
ng g guard guard name

Important Packages

Bootstarp:

• Link: (https://www.npmjs.com/package/bootstrap)
• Installion steps: Add Bootstrap js and bootstrap css in angular.json at style and script.

Jquery:

• Installion steps: Add Jquery js before bootstrap js in angular.json at style and script.
• Link: (https://www.npmjs.com/package/jquery)

Image slider:

• npm install angular-image-slider --save
• Link: (https://www.npmjs.com/package/angular-image-slider)

Angular Custom Scrollbar:

• npm i -S ngx-scrollbar @angular/cdk
• Link: (https://www.npmjs.com/package/ngx-scrollbar)

Search Filters:

• npm i ng2-search-filter --save
• Link: (https://www.npmjs.com/package/ng2-search-filter)

Toster :

• npm install ngx-toastr --save
• Link: (https://www.npmjs.com/package/ngx-toastr)

Slider:

• npm install --save ng5-slider
• Link: (https://www.npmjs.com/package/ng5-slider)

spinner

• npm install ngx-spinner --save
• Link: (https://www.npmjs.com/package/ngx-spinner)

ReactiveFormsModule:

• https://angular.io/api/forms/ReactiveFormsModule

Google Recaptcha:

• npm i ng-recaptcha --save
• Link: (https://www.npmjs.com/package/ng-recaptcha)

Angular Scroll Bar

• npm i -S ngx-scrollbar @angular/cdk
• Link: (https://www.npmjs.com/package/ngx-scrollbar)

Pagination:

• npm install ngx-pagination --save
• Link: (https://www.npmjs.com/package/ngx-pagination)

Web Tutorials

https://www.tutorialspoint.com/angular7/index.htm

https://angular.io/tutorial

Video Tutorials

1. https://www.youtube.com/watch?v=0eWrpsCLMJQ&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ

2. https://www.youtube.com/watch?v=SuZa2nv24HE&list=PL_qizAfcpJ-MTpfAPtayiKeJ0OexCcxvh

3. Angular University

Podcast for angular

1. Angular Air
2. Adventures in Angular