Adding a Full Task [PlannerTask] to 365 planner

Today i created an angular app to interact with MS 365 Planner. I tried to add a task. The example @MS - create task works fine
{"planId":"xqQg5FS2LkCp935s-FIFm2QAFkHM","bucketId":"hsOf2dhOJkqyYYZEtdzDe2QAIUCR","title":"Update client list","assignments":{"fbab97d0-4932-4511-b675-204639209557":{"@odata.type":"#microsoft.graph.plannerAssignment","orderHint":" !"}},}
Adding a details object was great until i was trying to add some checklist items.
My app gave this error [400]:

message:"Schema validation has failed. Validation for field 'Title', on entity 'Task' has failed: A non-null value must be specified for this field."

Well, this is the end of the story, since after everything went well in the Graph Explorer my app still gave the same error, until i notices that the Content-Type was application/x-www-form-urlencoded.

The Fix is

Angular Dual App

or more exact run separate root components.

you can just add multiple components to the bootstrap: [ decorator.

then you can run as many apps as you want.

bootstrap: [   AppComponent,   LoginComponent,   ContactComponent,   TableComponent, ]
<body>   <app-welcome></app-welcome>   <app-login></app-login>   <app-table></app-table>   <app-contact></app-contact> </body>

in Angular 4 Services has scope. if we create a service at the App.Module Scope, it will share all it's info will all apps, all comps, but if you create a service, and declare it inside a providers:[ decorator, inside a specific Component, then all child components will share the same instance, but siblings comps declaring the same service will have their own instance.

MatDatePicker Errors

if you get this one

Can't bind to 'matDatepicker' since it isn't a known property of 'input'

then you're missing some modules in your import, the datepicker has many dependencies, and i didn't tried to find them, so just fill in the long long list in the plnk.

for this one

MatDatepickerToggle.html:1 ERROR TypeError: Cannot read property 'disabled' of undefined

you have some miss-spell like [for]="pickerFrom"vs#pickerFrom

Javascript sort then by

i'll just give a piece of code to show this Great Answer.

var a = [];
for (x = 1; x <= 3; x++){
for (y = 1; y <= 3; y++){
for (z = 1; z <= 3; z++){
a.push({x:x, y:y, z:z})

a.sort(function (a, b) {
    return a.z - b.z || a.x - b.x || a.y - b.y ;

just copy paste into the console and see for yourself.

for strings you'll need extra help

var a = [];
for (x = 1; x <= 3; x++){
for (y = 1; y <= 3; y++){
for (z = 1; z <= 3; z++){
a.push({x:x, y:y, z:'af' + z.toString()})

var strSort = function(a,b){
if(a < b) return -1;
    if(a > b) return 1;
    return 0;

a.sort(function (a, b) {
return strSort(a.z,b.z) || a.x - b.x || a.y - b.y ;

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
from the RxJs site

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

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",

Angular 4 Services (Http) Inheritance

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();   } }

1st error:

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