Angular Notes/Cheatsheet and Learning Kit

Click ⭐ if you like the project. Pull Request are highly appreciated. Follow me @thedevankit for technical updates.

Contents:

• Installation
• Useful Commands
• Important Packages
• Awesome Packages
• Web Tutorials
• Video Tutorials
• Courses
• Free Courses
• Podcast for angular
• Blogs
• Projects with angular to contribute
• Angular common errors and features
• Trends in web technology
• Useful Code snippet
• Code snippet for from validation
• Interview Questions
• Angular Optimization and Hacks
• Contributing

Installing Angular CLI:

npm install -g @angular/cli

Useful Commands:

The documentation for the command ist linked on the task description.

Parameters like <NAME> should be replaced with the actual names of the element.

Task	Command	Popular Parameters
Create new Application	ng new <PROJECT_NAME>	--directory Generates the new application in the specified directory.
Run an Angular Application	ng serve ng s (Run the angular app.) ng s -o (Open angular app in browser.)	--open, -o Opens the application in the default browser. --port <NUMBER>
Generate Module	ng generate module <NAME> ng g m <NAME>	--module, -m Specifies the declaring ngModule
Generate Component	ng generate component <NAME> ng g c <NAME>	--change-detection, -c Set the change detection strategy of the component. Possible values: Default | OnPush --display-block, -b Adds the style :host{display:block} --project Set the target module to add the component to.
Generate Interface	ng generate interface <NAME> <TYPE> ng g i <NAME> <TYPE>	The type parameter defines part of the file name name.type.ts
Generate Service	ng generate service <NAME> ng g s <NAME>	--skip-tests Does not crete .spec.ts file.
Generate Guard	ng generate guard <NAME> ng g g <NAME>	--skip-tests Does not crete .spec.ts file.

Angular update from 9 to 14 or latest

ng update  @angular/cli@10  @angular/cdk@10 @angular/core@10 @angular/common@10 @angular/forms@10 @angular/router@10 @angular/material@10 --force

ng update  @angular/cli@11  @angular/cdk@11 @angular/core@11 @angular/common@11 @angular/forms@11 @angular/router@11 @angular/material@11 --force

ng update  @angular/cli@12 @angular/cdk@12 @angular/core@12 @angular/common@12 @angular/forms@12 @angular/router@12 @angular/material@12 --force


ng update  @angular/cli@13 @angular/cdk@13 @angular/core@13 @angular/common@13 @angular/forms@13 @angular/router@13 @angular/material@13 --force


ng update  @angular/cli@14 @angular/cdk@14 @angular/core@14 @angular/common@14 @angular/forms@14 @angular/router@14 @angular/material@14 --force

Important Packages

Bootstrap:

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

NGXS State Management Pattern + Library

• npm install @ngxs/store --save
• Documentation : https://www.ngxs.io
• Practical video tutorial : https://www.youtube.com/watch?v=4gkVp9OHpi0

Ng Bootsttrap

• npm install --save @ng-bootstrap/ng-bootstrap
• Link : https://ng-bootstrap.github.io/#/home

Components and Material Design for Angular

• ng add @angular/material
• Link: (https://www.npmjs.com/package/@angular/material)

NGX Scanner

• https://github.com/zxing-js/ngx-scanner
• Info: Add support for QR code scanner in web app.

Jquery:

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

Multiple select

• npm install --save @ng-select/ng-select
• https://www.npmjs.com/package/@ng-select/ng-select

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)

Loader on service call

• npm i ngx-ui-loader
• Link: https://www.npmjs.com/package/ngx-ui-loader

ngx-skeleton-loader

• npm install ngx-skeleton-loader --save
• Used for: Loading content (better ux)
• Link: https://github.com/willmendesneto/ngx-skeleton-loader

Toster :

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

ngx-face-api (face detection)

• ng add ngx-face-api-js
• Link: https://ngx-face-api-js-demo.stackblitz.io/

Material Carusel

• npm install @ngmodule/material-carousel --save
• Link: https://gsr.dev/material2-carousel/

Slider:

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

Emoji for angular

• npm install @ctrl/ngx-emoji-mart
• Link: https://www.npmjs.com/package/@ctrl/ngx-emoji-mart
• Example link: https://github.com/ariang/EasyChat-scrummers

spinner

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

ngx-gesture-password (Smart Lock)

• Link: https://github.com/cipchk/ngx-gesture-password
• Demo: https://cipchk.github.io/ngx-gesture-password/

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)

ngx-typed-text (Animation)

• npm install ngx-typed-text --save
• https://jghignatti.github.io/ngx-typed-text/

Pagination:

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

Angular mat table crud

-Link: https://github.com/marinantonio/angular-mat-table-crud

NGX-Moment :

• npm install --save moment ngx-moment
• Link: https://www.npmjs.com/package/ngx-moment
• used for: Using Moment JS as a Pipe Angular for date time

Unobtrusive Toaster

• npm install ngx-toastit --save
• Link: https://monolizard.github.io/ngx-toastit/

ngx-beautiful charts

• npm install ngx-beautiful-charts --save
• Link: https://snowpu.github.io/ngx-beautiful-charts/

Angular text input autocomplete

• npm i angular-ng-autocomplete
• Link : https://www.npmjs.com/package/angular-ng-autocomplete
• Example Link: https://stackblitz.com/edit/angular-ng-autocomplete?file=src%2Fapp%2Fapp.module.ts

CSS Toolkit:

• Link: https://tachyons.io/ A lightweight CSS Toolkit that is good for your angular application.

Data-driven Form Validators

• npm install ngx-validate
• Link: https://github.com/EdenWoo/ngx-validate

Json Server

• npm install -g json-server
  To Run json server
  1. json-server --watch db.json
  2. json-server --watch db.json --port 3004
  • Link: https://www.npmjs.com/package/json-server

http-server-spa

• npm install http-server-spa -g
• Usage: http-server-spa
• Link: https://www.npmjs.com/package/http-server-spa

ngx-lightbox

• npm install --save ngx-lightbox
• Used for: Imgage pop up
• Link: https://www.npmjs.com/package/ngx-lightbox

ngx-link-preview

• npm i ngx-link-preview
• Used for: To show link preview
• Link: https://www.npmjs.com/package/ngx-link-preview

Autocomplete user name (@ and username to get auto suggetions):

• npm i ngx-input-autocomplete
• https://www.npmjs.com/package/ngx-input-autocomplete

PWA App

• npm i @angular/pwa
• Used for: To add PWA feature in angular web app
• Link: https://www.npmjs.com/package/@angular/pwa

ng-simple-slideshow

• npm i ng-simple-slideshow
• Used for: Adding responsive image sliders/ Carousel
• Link: https://www.npmjs.com/package/ng-simple-slideshow

Image Slider2

• npm i ng-image-slider
• Demo Link: https://sanjayv.github.io/ng-image-slider/
• Link: https://www.npmjs.com/package/ng-image-slider

Google Charts

• npm i angular-google-charts
• Used for: To add google charts in web app
• Link: https://www.npmjs.com/package/angular-google-charts
• Demo: Demo code
• Documentation: devrandom-official doc

Infinite scroll / Data load on mouse scroll

• npm install ngx-infinite-scroll --save
• Used for: To load data from apis on scroll
• Link: https://www.npmjs.com/package/ngx-infinite-scroll
• Demo: ngx infinite scroll demo code

Webcam component

• npm install --save ngx-webcam
• Used for: To load data from apis on scroll
• Link: https://www.npmjs.com/package/ngx-webcam
• Demo: ngx-webcam demo

Awesome Packages

Packages to export data in different file type.

1. Export To Csv
2. Pdfjs-viewer

Web Tutorials

1. https://angular.io/start
2. https://www.tutorialspoint.com/angular7/index.htm
3. https://angular.io/tutorial
4. https://www.thetechieshouse.com/
5. angular-beginners-guide
6. angular-forms-and-validations

Video Tutorials

1. Mastering Advanced Angular

2. Angular 8 Tutorial by Codevolution

3. Angular 7 Full Tutorial in Hindi

4. Angular University

5. Angular Crash Course - 2019

6. kudvenkat

7. Angular Tutorial for Beginners: Learn Angular from Scratch | Mosh

8. Angular Material Tutorial

9. Learn Angular 2,4,5 Online Training

10. Angular Best Practices

11. Advanced Angular tips and tricks

Courses

1. Angular and NodeJS - The Mean Stack Guide

2. Shaping up with AngularJS

3. Angular 8 The Complete Guide

4. Angular front to back

5. The Complete Angular Course: Beginner to Advanced

Free Courses

1. Angular free cource in Edyoda

Podcast for angular

1. Angular Air
2. Adventures in Angular

Blogs

1. Build A Real World Beautiful Web APP with Angular 8
2. Angular Blogs
3. Adv-in-Angular
4. Sitepen
5. Principles For Better, Cleaner Code
6. Learn Angular 8 Step By Step in 10 Days
7. angular-cheat-sheet
8. Crud operation using angular 8/9

Angular Quick Cheatsheet

1. angular-cheat-sheet
2. Angular-PWA

Projects with angular to contribute

1. NGX-Admin
2. Angular google maps
3. NGX-charts
4. Storybook
5. Angularfire2
6. Angular Material
7. Angular-chat-sentiment-analysis
8. Music-web-player

Tools to combine with your angular application ()

1. GraphQL
   • Great for big scope application and multiple endpoints.
2. RSCSS
   • A styleguide for creating styles, made by a filipino github contributor.

Trends in web technology

1. Tech-trends-showdown-react-vs-angular-vs-vue
2. AngularToVue
3. From-vue-to-angular

Angular common errors and features

(How to solve)

1. Angular 7 app getting CORS error from angular client
2. Angular cors error
3. Angular-jwt
4. Angular-forms-and-validations
5. Responsive bootstrap tabs
6. Uploading-files-in-angular2
7. Setup-a-proxy-for-api-calls
8. 404-error-occur-when-i-refresh-through-the-browser
9. How-to-get-route-path-parameters-in-non-routed-angular-components
10. 48-answers-on-stack-overflow-to-the-most-popular-angular-questions
11. angular-2-google-docs-viewer
12. encrypt-the-string-in-typescript-and-decrypt-in-c-sharp
13. anchorscroll-on-static-page-with-angular
14. using sqlite as database for angular v7
15. What is the proper use of an EventEmitter

Interview

1. Angular Interview Questions
2. 50-top-angular-interview-questions
3. Top-angularjs-interview-questions

Angular Optimization And Hacks

1. Creating Modules for lazy loading Generates Module, component and route for the component.

      ng generate module --module aap.module --route component component_name
   

2. Optimization of angular app: Angular apps can be optimized by removing the unused modules and references.

   That can be done by setting sourceMap: True and NameChunks: true
   Using source-map-explorer we can verify the bundle size and optimized it. npm i source-map-explorer@1.7.0

   Details: https://www.npmjs.com/package/source-map-explorer/v/1.7.0

   How to use: source-map-explorer foo.min.js(generated js file)

   • On Top of this we have
     • https://www.npmjs.com/package/@ngx-builders/analyze Run the source-map-explorer with zero configuration.
     • ng add @ngx-builders/analyze --project={projectName}

3. NGX-Quick Link It provides router preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen.

4. Angular Project Architecture

   • angular-folder-structure-examples

How can I support / Contributing

Please refer to the contributing file.