Hi guys I had the same problem but I did this and that message stopped showing… I hope help us. tsconfig.json { “extends”: “../../tsconfig.json”, “compilerOptions”: { “types”: [“node”, “jest”] }, “include”: […], “angularCompilerOptions”: { “strictTemplates”: true } } Configuration
angular-cli is something magic, everything is done in a simple and automatic way. But sometimes, you may want to act on how the package is done, add a plugin or you are simply curious to see the Webpack configuration on which it is based. When running ng eject, you generate a webpack.config.json file. Looking at … Read more
After viewing a bunch of answers about ValueAccessor and HostListener solutions, I made a working solution (tested with RC1): import {NgControl} from “@angular/common”; import {Directive, ElementRef, HostListener} from “@angular/core”; @Directive({ selector: ‘input[nullValue]’ }) export class NullDefaultValueDirective { constructor(private el: ElementRef, private control: NgControl) {} @HostListener(‘input’, [‘$event.target’]) onEvent(target: HTMLInputElement){ this.control.viewToModelUpdate((target.value === ”) ? null : target.value); … Read more
This works in Angular 9 and 10 (note observe: ‘events’) const headers = new HttpHeaders({ ‘Content-Type’: ‘application/json’, Accept: ‘application/json’, Authorization: token })) const formData = new FormData(); formData.append(‘file_param_name’, file, file.name); this.httpClient.post(url, formData, { headers, reportProgress: true, observe: ‘events’ }).subscribe(resp => { if (resp.type === HttpEventType.Response) { console.log(‘Upload complete’); } if (resp.type === HttpEventType.UploadProgress) { const … Read more
You can do this by using onCompleted callback in subscription. For example, let’s say you show loading bar when user press report button; loadCompanies(): void { this._companyService.getCompanies().subscribe( response => { this.companiesModel = response; }, err => { console.log(err); //closeLoadingBar(); }, () => { //do whatever you want //closeLoadingBar() } ) } generateReport() { //showLoadingBar() this.loadCompanies(); … Read more
Use Renderer provided by Angular to manipulate the DOM: import { DOCUMENT } from ‘@angular/common’; export class MyDirective implements OnInit { constructor( private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { } ngOnInit() { const child = this.document.createElement(‘div’); this.renderer.appendChild(this.elementRef.nativeElement, child); } } This doesn’t depend on the native DOM API like appendChild(), so … Read more
All you need is to use [ngTemplateOutletContext] Read More Here is the way how you can achieve that : <div> <h3>All Templates</h3> <ul *ngFor=”let number of numbers”> <ng-container [ngTemplateOutlet]=’number % 2 == 0 ? even_tpl : odd_tpl’ [ngTemplateOutletContext]=”{number:number}”></ng-container> </ul> </div> <ng-template #odd_tpl let-number=”number”> <li>Odd: {{number}}</li> </ng-template> <ng-template #even_tpl let-number=”number”> <li>Even: {{number}}</li> </ng-template> WORKING DEMO
First import the TemplateCompiler. import { TemplateCompiler } from ‘angular2/src/compiler/template_compiler’; Next inject the TemplateCompiler in your constructor. constructor(private _templateCompiler: TemplateCompiler) Finally use that to clear the cache. Note this clears all templates. this._templateCompiler.clearCache(); UPDATE: Angular 2 Beta 17 First import the RuntimeCompiler. import { RuntimeCompiler} from ‘angular2/src/compiler/runtime_compiler’; Next inject the RuntimeCompiler in your constructor. constructor(private … Read more
You need to cast. Because of the multi-platform strategy, they didn’t specify a specific type for nativeElement: (myComponentFixture.nativeElement as HTMLElement)….
I encountered the same problem and found the solution: Open angular.json file; In every app configuration set: “stylePreprocessorOptions”: { “includePaths”: [ “./node_modules” ] } remove ~ in every import;