angular

Apply a condition using ngFor and ngIf in angular 2 [duplicate]

by

I would flip-flop your button and div: <div *ngFor=”let item of items”> <button *ngIf=”(item.data.type == 1)”>{{item.data.name}}</button> </div> This way only buttons get created for valid items. If <div>‘s aren’t desirable use <ng-container> instead. Though not advisable due to performance reasons, you can also use a function in your component: <button *ngFor=”let item of filterItemsOfType(‘1’)”>{{item.data.name}}</button> Where … Read more

How to manage SCSS stylesheets across a monorepo with different libraries sharing variables?

by

I think I might have something here, this is the solution I’ve adopted after some back ‘n forth with the NRWL team. I create an NX workspace by first creating a project with the angular CLI, and then adding the extensions, like so: ng new myproject (cd into myproject root) ng add @nrwl/workspace In addition, … Read more

Angular Material: How to validate Autocomplete against suggested options?

by

For those who may need a similar approach. Here’s my solution. I’ve built a custom validation rule according to my needs. SELECTBOX_VALUE: [ null, Validators.compose([ Validators.required, FormCustomValidators.valueSelected(this.myArray), ]), ]; export class FormCustomValidators { static valueSelected(myArray: any[]): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { let selectboxValue = c.value; let … Read more

How to have absolute import paths in a library project?

by

The paths mapping you establish in your tsconfig.json is purely a compile-time mapping. It has no effect on the code generated by the TypeScript compiler. Which is why you have a failure at run time. That’s something that has been reported to the TypeScript project, suggesting that tsc should automatically translate module paths in emitted … Read more

Q: How to use Angular 2 template form with ng-content?

by

There is a good chance that you have come up with another solution at this point but I just figured out a way to do this. Hopefully it will help you or someone else. import { NgModel } from ‘@angular/forms’; import { Component, ContentChildren, ViewChild, QueryList, AfterViewInit } from ‘@angular/core’; @Component({ selector: ‘my-custom-form’, template: ` … Read more