ANGULAR

  1. Write Ng Add Schematics for Library in Monorepo

    In our monorepo, we have about 30-40 projects under library. We use custom schematics to integrate our library with Angular CLI. This post shows how we create schematic for ng add to enhance the initial installation process for our consumers. Our initial workspace/library structure is shown as: /<workspace&…
    on ANGULAR NX - Comments

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

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

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

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

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