Posts

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…

TypeScript Arrow Functions Names Issue (Angular 4)

Image
Currently using TypeScript 2.3.3 with Angular 4.2.4.

I've created a service, doing a simple promise, then (success, failure), into another then / catch in the calling function.

and i was surprised to learn that TypeScript, (unlike ES6 definition), still doesn't name arrow functions. That simply means that whenever you create a function like this

"(args or not) => { //code }"

you can't ever give it a name, and it will always stay as an anonymous function, mainly meaning that in an error when you would like to see the call stack you'll get


and this is a wrong practice, you should ALWAYS name your functions just for that purpose.

the issues can be seen in StackOverflow and GitHub Typescript issue #6433

solution would be to actually use the function keyword everywhere.

in a class these 2 gets into the prototype and do not appear in the call stack at all:

Get(url) { console.error('Get'); }; Get(url) : void { console.error('Get'); };
these 2 declar…

Visual Studio Team Services (VSTS)

Image
I've started touring what the VSTS has to offer, and the truth is that they offer a great TFS, and that's it, for the free account. also it builds your solutions, so eventually you know that the thing will work at any other machine and its great, really.

For any hosting you need to acquire an Azure account, and while you can get one for 1 month free trial, there are plenty of Really Free .NET hosting services out there, my favorite is AppHarbor, where you can use a github repo, or if you want free and private there is BitBucket.

But with MS, like MS, things just can't go smooth.

I created a simple Web Api project (without MVC), just TesterController as is OOTB, and commit.

just like with the API Controllers, you create one and forget to add "Controller", you just can't understand why things not working, and nothing tells you to add that words, or auto-add it, same here that the API needs 5 Nuget Packages, but it references the LM folder instead of the solutio…

Angular 4 Material - beginner tutorial / starter notes

Image
i have just tried the Angular 4 Material, following their get started guide and just tried the DatePicker.

but things didn't go as well as expected, until i jumped to the plnk to see the example.

if you'll notice the main.ts it has a long long list of imports


i just tried to add all this long list to my app, and it finally worked.

technically if you'll import just the MdDatepickerModule as stated in the docs something will happen, even the <md-form-field> didn't worked. but eventually you want it initially to look just like in the docs.


so my 1st advice - import all the modules. when you get to the point where you want to change or use specific things, start cutting the modules.


2nd advice is to make a separate module with all the material modules. but how to do it right?
well, 1st don't put the new file in the app/src folder or you will get this error.

2nd, you just copy that long long list, and paste it 3 times, your file should look like this:

import { NgMo…

Taking Angular 4 as Stand Alone with Asp.Net Web Forms or MVC

Image
once you do in the CLI ng build you will have a new folder named dist containing the rendered solution, in our case our nice Products App.

I created a new ng project named MSProductsAppAspNet in order to put it inside an Asp.Net project.

IISHander (ashx)
so to make things easy, i started with a handler to do the same thing we did with the web api, merging the Products[] array init lines as a static var inside Product class.

publicclassProduct {
  publicint Id { get; set; }
  publicstring Name { get; set; }
  publicstring Category { get; set; }
  publicdecimal Price { get; set; }
  publicstaticProduct[] products = newProduct[] {
new