/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:

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:

NGXS State Management Pattern + Library

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

Infinite scroll / Data load on mouse scroll

@ngneat/spectator

Webcam component

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

Please refer to the contributing file.