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 steps and basic
• 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
• Angular Optimization and Hacks
• Interview Questions

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

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

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. Angular 8 Tutorial by Codevolution

2. Angular 7 Full Tutorial in Hindi

3. Angular University

4. Angular Crash Course - 2019

5. kudvenkat

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

7. Angular Material Tutorial

8. Learn Angular 2,4,5 Online Training

9. Angular Best Practices

10. 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 [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

Your contributions to the repo are welcome. For major changes, please open an issue first to discuss what you would like to change.

• Please make sure you are adding valuable content to the file.
• Star this GitHub Repo
• Create pull requests, submit bugs, suggest new links