Awesome Links
Frequently Asked Questions
A curated list of awesome Angular resources
How do I use this template projects?
Add your own app along with
default
app and use shared modules inlibs
. once you are conferable , then you can delete demodefault
appHow structure code into modules for better organize and maintain code?
Use
Core
,Shared
and lazy-loadedFeature
modules More hereHow do I mock test?
Refer here
Differential Loading
Find what browsers are supported?
cd apps/webapp
,npx browserslist
How do I design Landing page?
How to Profile Change Detection?
Refer here type
ng.profiler.timeChangeDetection();
in console.
How do I theme SPA App?
Refer here Refer here Multiple Themes Without Killing Bundle Size
How to use flex grid?
How implement Progressive Web Applications (PWA) with Service Workers?
Refer here Read Building a Search-Engine Optimized PWA with Angular Refer webmax Node: you cannot cache external urls (images etc) unless they are CORS enabled. Creating App-Shell
How to keep footers at the bottom of the page?
Refer here
WTF is monorepo?
Monorepo != Monolith
When you have all your codebase within the same repository it’s tempting to fall into the trap of creating a monolith (a gigantic application where all parts are intertwined with each other) so we need to ensure that modularity is a first class citizen within these repositories. Each package has clearly defined boundaries and ownership.
What are the guidelines to setup monorepo for enterprise size apps?
How do I add
Content Management
to my angular app?Using
ngx-markdown
you can add blogs, about, FAQ content onmarkdown
, and it will generate static html and integrate with your Angular App.Refer Add a blog to your Angular website using markdown files
internationalization ?
Component-Driven Development (CDD)
Read CDD
Creating Reusable Animations in Angular
Read Reusable Animations
Micro-Interactions
routing animations Read medium-clap Read Must-have animations for Chatbots Read The ultimate guide to proper use of animation in UX Read Microinteractions: small details matter
Microfrontends
Angular Utils , Libs
Curated collection of useful Angular snippets that you can understand in 30 seconds or less.
Animations
Why I Prefer NGXS over NGRX
Read NGXS vs NGRX
Firebase + NGXS, the perfect couple
To build high-performance apps with #Angular you need 2 parts State management & a rendering system with the principle of locality in mind. we are using NGXS for State Management and @rx-angular/template for zoneless Rendering System
How to preload modules?
Read Angular Router: Preloading Modules
How to debug router?
{ enableTracing: true }
Read debugging routerHow to Debug Angular apps in production without revealing source maps?
How to open Angular Material Dialog via route link?
useful for sharing bookmarkable links. e.g.,
/account/edit
/account/add
> Routing to Angular Material DialogsCustomizable, Resizable, Draggable, dialog Management lib.
ng add @ngneat/dialog
https://github.com/ngneat/dialogHow to use new
providedIn
Dependency Injection?
about new Angular 9 providedIn scopes 'any' and 'platform'
Read Total Guide To Angular 6+ Dependency Injection : providedIn vs providers: []
How to manage state in the front-end?
use NGXS Read Immer with NGXS
Best practices for NgRx Action?
Types of Actions: User Actions, Backend Actions, Device Actions Watch Good Action Hygiene with NgRx Mike Ryan
How to implement route animations?
Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime
Refer here
how to Deploy to GitHub Pages?
Refer here
How to chose a color palette for material components?
Refer here
how to implement search experience with facets and sort options?
Refer here
What I get from angular-cli?
Publishing Angular Library?
Refer stories
How to customize material design typography?
Refer stories
How to cache backed-end API?
Use shareReplay Checkout combineLatest and shareReplay use in DeborahK's Repo and her talk.
Web APIs for Angular
-- ngadd
Angular Performance
Refer here
Refer Curated list of common mistakes made when developing Angular applications
Server-side rendering(SSR) and Pre-rendering
Rendering on the Web Refer Angular Universal v9: What's New ? Refer here nest-next > nuxt/vue.js + nest nest + angular
dynamic form group builder with class-validator
How to configure nginx?
Use blog
How to build a library for Angular apps?
Read build a library
how do adopt semantic-release process?
semantic-release is a fully automated library/system for versioning, changelog generation, git tagging, and publishing to the npm registry.
add ngx-semantic-version refer Refer Angular DevOps Watch Automating Releases with semantic-release Read enforcing commit conventions Read automate package releases
How to package the libs for publishing ?
Useng-packagr Usewith nx
How to lazy load modules ?
Use Angular Loadable for non-routable modules
How to implement security interceptors?
Enriching HTTP clients with capabilities related to security, performance or resilience Refer
How to get HTTPS working on your local development environment?
10 More Useful Angular Features You Might Not Have Heard Of
Apps That Work Natively on the Web and Mobile
https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
How to use Angular CDK Tables?
how to generate PWA's Push Notifications key pair?
Refer web-push-codelab
How to setup NestJS Project?
Refer An Introduction to NestJS > Refer Vendure an eCommerce framework build with GraphQL and NestJS Refer Getting Started with Nest.js What’s new in NestJS Swagger 4 ?
Shoud I use mergeMap or concatMap or switchMap or forkJoin for my usecase?
Short Answer: concatMap for writes, mergeMap for reads, switchMap when you have to cancel http call. TL;DR: mergeMap doesn’t preserve the order, concatMap does preserve the order. switchMap cancels previous inner Observables when a new inner Observable appears Ref blog Ref blog Ref blog
Secure Angular App with KeyCloak?
in this project, we are demonstrating how to secure UI and backend APIs using following OIDC Flows.
Resource Owner Password Credentials FLow
Implicit FLow
Authorization Code FLow Waiting
how to link local npm projects when you o patch a npm module locally?
Ref blog
Do you know how many change detections are triggered in the component?
Checkout this tweet
Top 40+ Angular interview questions and answers that you need to know in 2020
Angular Blogs
CSS
Organizing Styles
Global SCSS and per component specific SCSS (modular!)
Global styles
Component styles
Theme styles
Landing Page
A collection of pure css section separators. separator-generator
Nebular Layout
Nebular Layout padding https://stackoverflow.com/questions/59573196/nebular-page-causing-padding
UX Design
Landing Page Layout https://lineardesign.com/blog/landing-page-layout/
NestJS
Intro NestJS
Pattern
Awesome links
Angular Articles
Last updated