Skip to content

Instantly share code, notes, and snippets.


Thomas Burleson ThomasBurleson

View GitHub Profile
ThomasBurleson / cars.facade.spec.ts
Last active Apr 15, 2022
Testing NgRx Facades with async/await.
View cars.facade.spec.ts
import { NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { readFirst } from '@nrwl/nx/testing';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule, Store } from '@ngrx/store';
import { NxModule } from '@nrwl/nx';
ThomasBurleson /
Last active Dec 25, 2021
Using ngrx with Effects + Facades

NgRx State Management with TicketFacade

Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

When writing a lot of NgRx code - as many enterprises do - developers quickly accumulate large collections of actions and selectors classes. These classes are used to dispatch and query [respectively] the NgRx Store.

Using a Facade - to wrap and blackbox NgRx - simplifies accessing and modifying your NgRx state by masking internal all interactions with the Store, actions, reducers, selectors, and effects.

For more introduction, see Better State Management with Ngrx Facades

ThomasBurleson / gist:1017230
Created Jun 9, 2011
Cool Techniques with AS3 Closures
View gist:1017230
// ------------------------------------------------------------------------------------------------
* Why CLOSURES are great!
* Think of Closures as Functions within Functions... where nested functions have access to parent function variables
* and arguments. So, you may ask?
* Closures allow developers to temporarily cache data!
* Closures can simplify recursion or iterations (aka visitors pattern)
* Closures can solve real-world `callback` problems; especially powerful for asynchronous callbacks.
ThomasBurleson /
Last active Dec 12, 2021
Best Practices: Using Permissions as BitFlags

💚 Best Practices: Use Permissions as BitFlags

Developers often miss the opportunity to express permissions as a collection of enumerated bitflags; where complex permissions can be easily grouped by context.

Consider the scenario where a user may have 30 or more permission flags.

Improved Version 😄:

ThomasBurleson /
Last active Nov 10, 2021
Custom Nx workspace schematic to build a custom 'state' library.


We want to build a custom schematic for company Aero that will internally do two things:

  • build a new ngrx library using Nx workspace naming conventions
  • generate ngrx state-management files; include the *.facade.* files

Important: This example is valid ONLY for Nx v6.2.x or higher!

ThomasBurleson / untilDestroyed.ts
Last active Apr 14, 2021
Using untilViewDestroyed to link component ngOnDestroy to observable unsubscribe.
View untilDestroyed.ts
* When manually subscribing to an observable in a view component, developers are traditionally required
* to unsubscribe during ngOnDestroy. This utility method auto-configures and manages that relationship
* by watching the DOM with a MutationObserver and internally using the takeUntil RxJS operator.
* Angular 7 has stricter enforcements and throws errors with monkey-patching of view component life-cycle methods.
* Here is an updated version that uses MutationObserver to accomplish the same goal.
* @code
ThomasBurleson /
Last active Feb 2, 2021
Angular Interview Questions

The interview questions below are grouped by category and each category lists questions in easy-to-hard order.

Interviews should ask the candidate to self-assess their skills/experience. Based on the candidate's response, the interviewer can jump to the appropriate section.

Some basic questions going from easy to difficult. A more exhaustive list of more questions from the community can be found here.


  • What is variable shadowing
ThomasBurleson /
Last active Oct 11, 2020
Why is RxJS::defer() important!

Quite simply, because Observables can encapsulate many different types of sources and those sources don't necessarily have to obey that interface. Some like Promises always attempt to eagerly compete.


const promise = $.get('');
View lazy-img.component.ts
import {
} from '@angular/core';