Angular Notes/Cheatsheet and Learning Kit

Contents:

• Installation steps and basic
• Important Packages
• Web Tutorials
• Video Tutorials
• Courses
• Podcast for angular
• Blogs
• Projects with angular to contribute
• Angular common errors and features
• Trends in web technology

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.

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)

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

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

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

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

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

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