angular

How to declare a variable in a template in Angular

by

Update We can just create directive like *ngIf and call it *ngVar ng-var.directive.ts @Directive({ selector: ‘[ngVar]’, }) export class VarDirective { @Input() set ngVar(context: unknown) { this.context.$implicit = this.context.ngVar = context; if (!this.hasView) { this.vcRef.createEmbeddedView(this.templateRef, this.context); this.hasView = true; } } private context: { $implicit: unknown; ngVar: unknown; } = { $implicit: null, ngVar: null, … Read more

Is it necessary to unsubscribe from observables created by Http methods?

by

So the answer is no, you don’t. Ng2 will clean it up itself. The Http service source, from Angular’s Http XHR backend source: Notice how it runs the complete() after getting the result. This means it actually unsubscribes on completion. So you don’t need to do it yourself. Here is a test to validate: fetchFilms() … Read more

Angular File Upload

by

Here is a working example for file upload to api: Step 1: HTML Template (file-upload.component.html) Define simple input tag of type file. Add a function to (change)-event for handling choosing files. <div class=”form-group”> <label for=”file”>Choose File</label> <input type=”file” id=”file” (change)=”handleFileInput($event.target.files)”> </div> Step 2: Upload Handling in TypeScript (file-upload.component.ts) Define a default variable for selected file. … Read more

How to pass url arguments (query string) to a HTTP request on Angular?

by

The HttpClient methods allow you to set the params in it’s options. You can configure it by importing the HttpClientModule from the @angular/common/http package. import {HttpClientModule} from ‘@angular/common/http’; @NgModule({ imports: [ BrowserModule, HttpClientModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {} After that you can inject the HttpClient and … Read more

Property ‘value’ does not exist on type ‘EventTarget’

by

You need to explicitly tell TypeScript the type of the HTMLElement which is your target. The way to do it is using a generic type to cast it to a proper type: this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*…*/) or (as you like) this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*…*/) or (again, matter of preference) const target = e.target as HTMLTextAreaElement; this.countUpdate.emit(target.value./*…*/) This will let … Read more

Angular window resize event

by

<div (window:resize)=”onResize($event)” onResize(event) { event.target.innerWidth; } or using the HostListener decorator: @HostListener(‘window:resize’, [‘$event’]) onResize(event) { event.target.innerWidth; } Supported global targets are window, document, and body. Until https://github.com/angular/angular/issues/13248 is implemented in Angular it is better for performance to subscribe to DOM events imperatively and use RXJS to reduce the amount of events as shown in some … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)