Angular change detection only checks object identity, not object content. Inserts or removals are therefore not detected. What you can do is to copy the array after each update insertIds(id:any) { this.metaIds.push(id); this.metaIds = this.metaIds.slice(); } or use IterableDiffer to check for changes inside InputComponent in ngDoCheck like NgFor does.
Angular ^4 As workaround i can offer you the following solution: <div *ngIf=”insideRedDiv; else elseTpl” style=”display: inline; border: 1px red solid”> <ng-container *ngTemplateOutlet=”elseTpl”></ng-container> </div> <ng-template #elseTpl><ng-content></ng-content> </ng-template> Plunker Example angular v4 Angular < 4 Here you can create dedicated directive that will do the same things: <div *ngIf=”insideRedDiv; else elseTpl” style=”display: inline; border: 1px red … Read more
Edit Since the original answer, Ecmascript, and Typescript (in 3.7) have both added the ?. (called the optional chaining operator) operator. See the PR for details. Original answer This is not a Typescript operator. Angular 2 has a safe navigation operator in templates. values?.listArray is equivalent to values != null ? values.listArray: null More info … Read more
With the latest CLI, inside angular.json “test”: { “builder”: “@angular-devkit/build-angular:karma”, “options”: { “main”: “src/test.ts”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.spec.json”, “karmaConfig”: “./karma.conf.js”, “codeCoverageExclude”: [“src/testing/**/*”],
You could check whether the user has scrolled to the bottom or not in the below way… Html file <div (scroll)=”onScroll($event)”> … … </div> typescript file onScroll(event: any) { // visible height + pixel scrolled >= total height if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) { console.log(“End”); } }
delay() is used to introduce a delay between events emitted by the observable. But the observable never emits any event. It just errors immediately. What you’re looking for is retryWhen(), which allows deciding after how long to retry: RxJS 5: .retryWhen(errors => errors.delay(1000).take(10)) RxJS 6: import { retryWhen, delay, take } from ‘rxjs/operators’ someFunction().pipe( // … Read more
*ngFor=”let item of items | slice:1; let i = index; SlicePipe
You are almost there, simply provide both SampleService and config in your module like below: export class SampleModule { static forRoot(config: CustomConfig): ModuleWithProviders<SampleModule> { // User config get logged here console.log(config); return { ngModule: SampleModule, providers: [SampleService, {provide: ‘config’, useValue: config}] }; } } @Injectable() export class SampleService { foo: string; constructor(@Inject(‘config’) private config:CustomConfig) { … Read more
To get data from an observable, you need to subscribe: this.singleEvents$.subscribe(event => this.event = event); In the template you can directly bind to observables using the async pipe: {{singleEvents$ | async}}
You have two options: 1. Use angular-fontawesome library Just follow the instructions on their github page. 2. Use fontawesome 5 directly Make sure you have installed all the relevant npm packages. For Pro packages check out this. Import relevant icons: import {faChevronLeft, faChevronRight} from ‘@fortawesome/fontawesome-free-solid’; import fontawesome from ‘@fortawesome/fontawesome’; Add the icons to fontawesome library … Read more