YETI
GithubDemo
1.0.0
1.0.0
  • YETI
  • Features
  • Getting Started
    • Why
    • Installation
    • Project Layout
    • NX commands
    • Playbook
    • NestJS Playbook
    • Scaffolding
  • Concepts
    • Introduction
    • Monorepo
    • DDD
    • Clean Architecture
  • Advanced
    • Content Management
    • Protobuf Tools
    • Protoc
    • Envoy
    • Style Guild
    • Angular Universal
    • Firebase
  • Modules
    • Apps
      • WebApp
      • Api
    • Libs
      • Admin
      • Blog
      • Core
      • Dashboard
      • Gen
      • Home
      • Not Found
      • Shared
  • GitOps
    • Build
    • Code Quality
    • API Docs
    • Release
    • CICD
  • DevOps
    • Database
    • Kubernetes
    • Deploy
  • Recipes
    • Authentication
    • Caching
    • Component Events from NGXS
    • Debouncing Actions
    • Dynamic Plugins
    • Immutability Helpers
    • Style Guide
    • Unit Testing
  • Community
    • Resources
    • Contributors
    • Contributing
  • FAQ
    • Yeti
    • Angular
    • GitBook
    • Awesome Links
  • Change Log
Powered by GitBook
On this page
  • CSS
  • UX Design
  • NestJS
  • Pattern
  • Awesome links

Was this helpful?

  1. FAQ

Awesome Links

Frequently Asked Questions

PreviousGitBookNextChange Log

Last updated 4 years ago

Was this helpful?

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 in libs. once you are conferable , then you can delete demo default app

  • How structure code into modules for better organize and maintain code?

    Use Core, Shared and lazy-loaded Feature modules More

  • How do I mock test?

Refer

  • Differential Loading

    Find what browsers are supported? cd apps/webapp, npx browserslist

  • How do I design Landing page?

  • How to Profile Change Detection?

Refer type ng.profiler.timeChangeDetection(); in console.

  • How do I theme SPA App?

    Refer Refer

  • How do I Make Site Responsive?

    Refer Refer

  • How to use flex grid?

    Refer

  • How implement Progressive Web Applications (PWA) with Service Workers?

    Refer Read Refer Node: you cannot cache external urls (images etc) unless they are CORS enabled. Creating

  • How to keep footers at the bottom of the page?

    Refer

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

    Refer

  • How do I add Content Management to my angular app?

    Using ngx-markdown you can add blogs, about, FAQ content on markdown, and it will generate static html and integrate with your Angular App.

    Refer

  • internationalization ?

    Refer

  • Component-Driven Development (CDD)

    Read

  • Creating Reusable Animations in Angular

    Read

  • Micro-Interactions

    Read Read Read Read

  • Microfrontends

  • UI Kits, UX Components

  • 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

  • How to preload modules?

  • How to debug router?

  • How to Debug Angular apps in production without revealing source maps?

  • How to open Angular Material Dialog via route link?

  • Customizable, Resizable, Draggable, dialog Management lib.

  • How to use new providedIn Dependency Injection?

**'Root'** will still be the default for most services. It makes it very convenient to create tree-shakable services which are singleton within an application.

**'Platform'** is most likely used for creating shared services for Angular Elements. If you know another use case, please let me know an create a PR on this article.

**'Any'** is very helpful to make sure a service is a singleton within module boundaries. It's a robust alternative to 'root' to make sure the individual modules don't have a side effect on each other.
  • How to manage state in the front-end?

  • Best practices for NgRx Action?

  • How to implement route animations?

  • Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime

  • how to Deploy to GitHub Pages?

  • How to chose a color palette for material components?

  • how to implement search experience with facets and sort options?

  • What I get from angular-cli?

  • Publishing Angular Library?

  • How to customize material design typography?

  • How to cache backed-end API?

  • Web APIs for Angular

-- ngadd

  • Angular Performance

  • Server-side rendering(SSR) and Pre-rendering

  • dynamic form group builder with class-validator

  • How to configure nginx?

  • How to build a library for Angular apps?

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

  • How to package the libs for publishing ?

  • How to lazy load modules ?

  • How to implement security interceptors?

  • 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

  • How to use Angular CDK Tables?

  • How to implement Server-side Pagination, Filtering, Sorting, with Angular Material Data Table

  • how to generate PWA's Push Notifications key pair?

  • How to setup NestJS Project?

  • Shoud I use mergeMap or concatMap or switchMap or forkJoin for my usecase?

  • Secure Angular App with KeyCloak?

in this project, we are demonstrating how to secure UI and backend APIs using following OIDC Flows.

  1. Resource Owner Password Credentials FLow

  2. Implicit FLow

  3. how to link local npm projects when you o patch a npm module locally?

  4. 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!)

    1. Global styles

    2. Component styles

    3. Theme styles

Landing Page

Nebular Layout

UX Design

NestJS

Pattern

Awesome links

  • Angular Articles

Read

Read

Read

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 for zoneless Rendering System

Read Angular Router:

{ enableTracing: true } Read

Read attach local SourceMaps on laptop via Chrome dev tools

useful for sharing bookmarkable links. e.g., /account/edit /account/add >

ng add @ngneat/dialog

about new Angular 9

Read Total Guide To Angular 6+ Dependency Injection :

use Read

Types of Actions: User Actions, Backend Actions, Device Actions Watch

Refer Refer Refer

Refer

Refer

Refer

Refer

Refer Refer

Refer

Refer

Use Checkout combineLatest and shareReplay use in Repo and her talk.

Refer

Refer

Refer

Refer Refer >

todo

Use

Read

Refer Watch Automating Releases with Read Read

Use Use

Use for non-routable modules

Complete Examples Refer Refer Refer

Refer

Refer > Refer an eCommerce framework build with GraphQL and NestJS Refer

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

Authorization Code FLow

How to i18n?

Ref

A collection of pure css section separators.

Nebular Layout padding

Landing Page Layout

Intro

here
here
here
here
here
Multiple Themes Without Killing Bundle Size
here
here
Flexbox and Grid Layout for Angular Component
here
Building a Search-Engine Optimized PWA with Angular
webmax
App-Shell
here
Angular Enterprise Monorepo Patterns
Advantages of monorepos
Shell Library patterns with Nx and Monorepo Architectures
nx-ddd-plugin
ddd-demo
Blazing Fast Distributed CI with Nx Workspaces
Getting Started with Nx: The Nrwl Extensions for Angular
From Zero to However Far We Can Get With Nx
nx-examples
Nx monorepo with Ionic4
Create Your First Custom Angular CLI Schematic with Nx
Why Angular Teams Fail at Code Sharing and How This Monorepo Approach Will Fix It
Harmony with Angular, Lerna and Yarn Workspaces
NestJS mono-repo starter
Sustainable Angular Architectures With Strategic Design And Monorepos - Part 1: Methodology
Opinionated guidelines for large nx angular projects
Add a blog to your Angular website using markdown files
Angular Internationalization
CDD
Reusable Animations
routing animations
medium-clap
Must-have animations for Chatbots
The ultimate guide to proper use of animation in UX
Microinteractions: small details matter
Microfrontends and Monorepos
Material
Nebular
Clarity
ng-aquila
ngx-date-fns
30-seconds-of-angular
Hierarchical Route Animations
NGXS vs NGRX
Firebase + NGXS, the perfect couple
@rx-angular/template
Preloading Modules
debugging router
Routing to Angular Material Dialogs
https://github.com/ngneat/dialog
providedIn scopes 'any' and 'platform'
providedIn vs providers: []
NGXS
Immer with NGXS
Good Action Hygiene with NgRx Mike Ryan
here
here
here
here
here
here
here
stories
blogs
stories
stories
shareReplay
DeborahK's
Web APIs for Angular
The missing Web Bluetooth module for Angular
https://ngadd.com/
make Angular app faster
here
angular performance checklist
Curated list of common mistakes made when developing Angular applications
Rendering on the Web
Angular Universal v9: What's New ?
here
nest-next
nuxt/vue.js + nest
nest + angular
ngx-dynamic-form-builder
blog
build a library
add ngx-semantic-version
refer
Angular DevOps
semantic-release
enforcing commit conventions
automate package releases
ng-packagr
with nx
Angular Loadable
Enriching HTTP clients with capabilities related to security, performance or resilience
Refer
Refer
https://angular-guru.com/blog/angular-more-unknown-features
https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Refer
blog
Example 1
Example 2
web-push-codelab
An Introduction to NestJS
Vendure
Getting Started with Nest.js
What’s new in NestJS Swagger 4 ?
blog
blog
blog
Waiting
https://github.com/manfredsteyer/angular-oauth2-oidc
https://github.com/damienbod/angular-auth-oidc-client
https://github.com/jeroenheijmans/sample-auth0-angular-oauth2-oidc
https://github.com/mauriciovigolo/keycloak-angular
https://github.com/ssilvert/keycloak-schematic/wiki
https://symbiotics.co.za/integrating-keycloak-with-an-angular-4-web-application-part-2/
https://github.com/SchweizerischeBundesbahnen/api-devportal/blob/develop/src/app/shared/auth/auth.service.ts
https://medium.com/@robert.broeckelmann/when-to-use-which-oauth2-grants-and-oidc-flows-ec6a5c00d864
https://github.com/SchweizerischeBundesbahnen/api-devportal/blob/develop/package.json
Angular9 i18n with @angular/localize
blog
https://store.akveo.com/blogs/news/top-35-angular-interview-questions-and-answers-that-you-need-to-know-in-2020
https://netbasal.com/
separator-generator
https://stackoverflow.com/questions/59573196/nebular-page-causing-padding
https://lineardesign.com/blog/landing-page-layout/
NestJS
Introducing Mapped Types for NestJS
https://tomastrajan.github.io/angular-model-pattern-example#/about
https://angular-guru.com/blog
Debug Angular apps in production
Chrome dev tools