Bind Array Item to [(value)] in Angular

Hi i am working with Angular material and i have an Array of products that creates a table in my template

 <tbody>
    <tr *ngFor="let item of productArray | async; let i = index">

Inside this loop i have another loop on a <th> tag:

<th>
   <mat-form-field>
      <mat-select placeholder="Length" formControlName="lengthOption" [compareWith]="compareWith" [(value)]="item.lengthOption">
         <mat-option *ngFor="let lengthOption of item.lengthOptions" [value]="lengthOption">
              
         </mat-option>
      </mat-select>
   </mat-form-field>

I would like to make use of the two way binding of [(value)].

I know i can set [value] to be lengthOption.name for example and then set the binding to [(Value)]="selected" and then i can set this in my component (selected = whatever) or view it in the template via .

My query is can i get this value from the parent array like i am trying in the inner loop:

*ngFor="let item of productArray | async; let i = index"

[(value)]="item.lengthOption"

lengthOption does exist on productArray.

The point of this i want to set a initial selected value for each products mat-select.

lengthOption looks like { "id": 1, "name": "Ten Years" }

So i am trying to set the object to the mat-option from a parent array, not just a object value form its own array.

Thanks in advance.

from Bind Array Item to [(value)] in Angular

Session Cookie has wrong behaviour in IE11?

please check the following two images:

The logic I want to achieve is the following: We have a web portal in which a user can simulate another user. Now when the user ends his session and starts the browser again, the simulation should be stopped and the user logged out.

To achieve that I set two cookies on login, one cookie with an expiry date of +99 days and another cookie without the expires attribute.

In IE11 the expires column is completely empty, I don't know why. But still when I close the window and end the session, the cookie is still present and my logic doesn't work.

checkSimulationCookieAndLogOut() {
    // Checks for cookie if a user is simulated and logs out
    let self = this;
    let sessionCookie = self.globalFunctions.getCookie('user-is-simulated-session-cookie');
    let userSimulationCookie = self.globalFunctions.getCookie('user-is-simulated');
    if(!sessionCookie && userSimulationCookie) {
        //self.globalFunctions.automaticLogoutAndRedirect();
        self.globalFunctions.deleteCookie('user-is-simulated');
        console.log('test');
    }
}

The cookies are set like this:

setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

self.globalFunctions.setCookie('user-is-simulated-session-cookie', 'true');
self.globalFunctions.setCookie('user-is-simulated', 'true', 99);

The self.globalfunctions is just a class holding some functions which are shared throughout the application.

Does anyone know what I can do differently or where I'm doing something wrong?

from Session Cookie has wrong behaviour in IE11?

Filtering different columns in a material table

I am trying to add different filters to a material table. To be more precise I am trying to reproduce something similar to the following gif link:

https://user-images.githubusercontent.com/13050078/36360926-1da0ffde-1550-11e8-83a6-e1e8bec31f20.gif

For doing so I am following irowbin response in the following github thread but I cant really produce what I want based on his guidelines:

https://github.com/angular/material2/issues/6178

Is there any working example on stackblitz or github so I can follow and create multiple search filters inside mattable?

from Filtering different columns in a material table