/Angular

A repositoy to learn and boost your Angular skills. It contains cheatsheet, code, articlues and all learning resources you need.

Primary LanguageTypeScript

Angular Notes/Cheatsheet and Learning Kit

alt text

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

Contents:

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:

Ng Bootsttrap

Components and Material Design for Angular

NGX Scanner

Jquery:

Multiple select

Image slider:

Angular Custom Scrollbar:

Search Filters:

Loader on service call

ngx-skeleton-loader

Toster :

ngx-face-api (face detection)

Material Carusel

Slider:

Emoji for angular

spinner

ngx-gesture-password (Smart Lock)

ReactiveFormsModule:

Google Recaptcha:

Angular Scroll Bar

ngx-typed-text (Animation)

Pagination:

Angular mat table crud

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

NGX-Moment :

Unobtrusive Toaster

ngx-beautiful charts

Angular text input autocomplete

CSS Toolkit:

Data-driven Form Validators

Json Server

http-server-spa

ngx-lightbox

ngx-link-preview

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

PWA App

ng-simple-slideshow

Image Slider2

Google Charts

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 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)

  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

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