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.…
    on ANGULAR NX Jest - Comments

  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"><…
    on ANGULAR - Comments

  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…
    on ANGULAR TypeScript - Comments

  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.…
    on ANGULAR Jest - Comments

  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…
    on ANGULAR - Comments

  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.…
    on ANGULAR NGRX Rxjs - Comments