1. Angular ViewChild

   We have created a message component which displays some default validation messages. The following block is to display the default message, only if there is no other custom validation message defined. <div *ngIf="!formControl"> <div #wrapper> <ng-content select=".customSelector"><…

2. Setter and getter that have different types

   TypeScript requires that both the getter and setter have the same type. For example code like this would create a type error. public get size(): number { return this._size; } public set size(value: number | string) { this._size = coerceNumberProperty(value) } private _size = 10; We sometimes want setter and getter on different…

3. Loading popper.js in Jest

   We recently wrote an angular component, which wraps around Popper.js [https://github.com/popperjs/popper.js] for our core front end team. The documentation and functionality of popper.js were very straightforward and easy to follow. We did hit some bumps when trying to write Jest for the component.…

4. Expression has changed after it was checked

   In our item component, we set the element role based on whether item is empty or not. If it's empty, then no role set; if not, role set as a listbox. empty(): boolean { return this.items && this.items.length === 0; } set role() { this.role = this.empty…

5. NgRx effects stream subscription

   NgRx/effects is used to handle side effects in ngrx/store. It listens for actions that are dispatched in an observe stream and then return new action(s). Often we forget that a selector inside an observable stream still needs to be unsubscribed. We explain why in the following example.…

6. TypeScript Type Guard

   In our code base, we have a utility function isArray to check whether an input is an Array. function isArray<T>(obj: any): boolean { return Array.isArray(obj); } Its goal is to return true if given input is an array, false if not. Other code references this utility…