1. Specs and CodeCoverage for Monorepos

   We recently switched our many in house Angular repos to a Monorepo. There are tons of benefits that are widely acknowledged and we won't repeat them here. The main idea of this post is to show how we reorganized our specs to avoid circular dependency issues during build.…

2. 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"><…

3. 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…

4. 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.…

5. 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…

6. 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.…