Make Angular Material Grid Responsive (again)

Question

Angular material grid isn't responsive and it's columns are set in the template and/or you can set a variable and have a property binding. I'm attemping to use the latter approach where I have a

public cols: Observable;

variable that I am over writing based on different window breaks. I'm following this article and have set up my code simililarly. But, my .map function comes up as unresolved

    ngOnInit(){
        const grid = new Map([
            ["xs", 1],
            ["sm", 2],
            ["md", 2],
            ["lg", 3],
            ["xl", 3]   ]);   let start: number;   grid.forEach((cols, mqAlias) => {
            if (this.observableMedia.isActive(mqAlias)) {
              start = cols;
            }   });   
  this.cols = this.observableMedia.asObservable().map(change => {
              console.log(change);
              console.log(grid.get(change.mqAlias));
              return grid.get(change.mqAlias);
            })
            .startWith(start);
    }

my imports are

import { ObservableMedia } from '@angular/flex-layout';
import { Observable } from "rxjs";
import { map, startWith } from 'rxjs/operators';

I've also tried importing by

import "rxjs/add/operator/map";
import "rxjs/add/operator/startWith";

but that throws errors, i'm assuming it's due to angular 6.

Any help on why .map function is undefined and why I cannot dynamically change my cols variable value?

Answer 1

RxJS v5.5.2+ has moved to Pipeable operators to improve tree shaking and make it easier to create custom operators. now operators need to be combined using the pipe method
Refer This
New Import

import { map} from 'rxjs/operators';

Example

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

Modified Code

 this.observableMedia.asObservable().pipe(map(change => {
              console.log(change);
              console.log(grid.get(change.mqAlias));
              return grid.get(change.mqAlias);
            }),startWith(start));