Posts

Showing posts from October, 2017

Angular 4 Keyup event fire multipletime?

i'll explain more of what i've learned answering this stackoverflow question.

well, lets just start by explaining that if you want say some AutoComplete based on an input element, so the problem with Keyup event is that while user is typing "Angu" you actually get 4 events, 1st with input value as "A", 2nd "An", ect.

but you want the part where he did "Angu" ...

well, there is the native answer, and the RxJs Implementation for that, and i will just start with the RxJx code for the reference, and then go for my Native Javascript example.

as you can see youself in my plnkr, we import the Observable as an object and then adding relevant Observable type and operator.

couple or sources to that:
some recipes medium.com
from the RxJs site reactivex.io

anyways these are the imports
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/auditTime';

and this is the code
@V…

Migrating to Angular Material 2.0.0.beta.11

if you're getting any of these errors suddenly or with adding new Material Angular elements:

ERROR in Error: MatMenuModule is not an NgModule
or Mat<module name>Module

Template parse errors: There is no directive with “exportAs” set to “matMenu”
or Mat<component name>
There is no directive with "exportAs" set to "mdMenu" ("<button md-button [mdMenuTriggerFor]="menu">Menu</button>
than your problem just seem's foul, but its simple.
head over to `package.json` and replace all the places with `^4.X.X` to `^4.4.3` or greater (4.4.4 avail to the time of writting) 
then, do to ALL your filed with some Material stuff, and change `md-`, `md` or `Md` to `mat-`, `mat` or `Mat`, including modules, components, imports, htmls, tags and attributes.
and all should work again.
if too annoying, you can just state the build for beta 10 which i believe means (didnt test): "@angular/material": "^2.0.0.beta.10",
GL&HF!

Angular 4 Services (Http) Inheritance

Image
Inheriting in Angular 4, meaning Typescript combined with Dependency Injection, can be tougher than you would expect.

lets say we just want a base class for all of our Services, they all use a WebApi, so they have their base url, which always bring the "all" array, and then "\3" for each item. so they all look like this:

exportclassServiceBaseClass {   constructor(privatebaseUrl, privatehttp:Http) {}   //public functions using baseUrl and http like   Get(itemID = ""){     varurl = this.baseUrl + itemID;     varpromise = newPromise ((resolve, reject) => {       this.http.get(url); // and whatever     })   } }
so you would like to make this the base class and each service just declaring its own "All Items" array and url. so you would thing this would work:

exportclassChocolateServiceextendsServiceBaseClass {   constructor() {     super('http://chocolate/');
    this.Get();   } }
HELL NO!

1st error:


ok, so lets move  privatehttp:Http  outside the C…