angular

How to call a function on every route change in angular2

by

you can call activate method from main router-outlet like this <router-outlet (activate)=”changeOfRoutes()”></router-outlet> which will call every time when route will change. Update – Another way to achieve the same is to subscribe to the router events even you can filter them out on the basis of navigation state may be start and end or so, …

Read more

“Edit / Delete” button for each row & header column is ‘Action’ in the md-table component

by

You are on the right track, you just need to add an actions item to displayedColumns list: displayedColumns = [“username”, “email”, “userFirstName” … , “actions”]; and: <ng-container cdkColumnDef=”actions”> <md-header-cell > Actions </md-header-cell> <md-cell *cdkCellDef=”let row” > <button md-raised-button >Edit</button> </md-cell> </ng-container>

Debounce @HostListener event

by

I would leverage debounce method decorator like: export function debounce(delay: number = 300): MethodDecorator { return function (target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) { const timeoutKey = Symbol(); const original = descriptor.value; descriptor.value = function (…args) { clearTimeout(this[timeoutKey]); this[timeoutKey] = setTimeout(() => original.apply(this, args), delay); }; return descriptor; }; } and use it …

Read more

Ionic 4 custom components

by

Finally figured this out, here’s a repro that works: ionic start myProject blank –type=angular ionic g module components ionic g component components/myComponent –export This adds both a declaration and export to the components module for “myComponent”. To use the component just add ComponentsModule to your imports in your page module, e.g. @NgModule({ imports: [ CommonModule, …

Read more

Cannot import exported interface – export not found

by

The root cause is in Typescript and transpilation. Once TypeScript code is transpiled, interfaces/types are gone. They don’t exist anymore in the emitted files. While the types are erased, the imports/exports aren’t necessarily. The reason is that there are ambiguities and that the compiler doesn’t always know for sure whether something that is exported is …

Read more

Angular 2 select text on specific input

by

You can easily do it in the template like this: <input type=”text” (click)=”$event.target.select()” /> or add a local variable to your element and reference that instead: <input type=”text” #myInput (click)=”myInput.select()” /> The benefit of the second approach is that by setting a local variable name to your element, other elements can reference that variable as …

Read more