Angular Notes/Cheatsheet and Learning Kit

alt text

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

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.

Web Tutorials

https://angular.io/start
https://www.tutorialspoint.com/angular7/index.htm
https://angular.io/tutorial
https://www.thetechieshouse.com/
angular-beginners-guide
angular-forms-and-validations

Video Tutorials

Courses

Free Courses

Angular free cource in Edyoda

Podcast for angular

Blogs

Angular Quick Cheatsheet

Projects with angular to contribute

Tools to combine with your angular application ()

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

Trends in web technology

Angular common errors and features

(How to solve)

Interview

Angular Optimization And Hacks

Creating Modules for lazy loading Generates Module, component and route for the component.
```
   ng generate module --module aap.module --route component component_name
```
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}
NGX-Quick Link It provides router preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen.
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

Angular Angular copied to clipboard

Metadata