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

@ngneat/spectator

• npm install @ngneat/spectator --save-dev
• Used for: Making more readable, sleek unit testing by getting rid of boilerplates
• Link: https://ngneat.github.io/spectator/
• Demo: NgNeat used in unit testing

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

12. How to Unit Test in Angular

13. How E2E Tests can drive Angular Testing Approach

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.
3. Nrwl/Nx
   • A tool for scaling multiple applications used by different developer teams within a single monorepo
4. RxAngular
   • A toolkit that priotizes app runtime performance, efficient template rendering, and improved developer experience

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 [email protected]

   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.