CODEWITHSUNDEEP
angularflexboxgridangular-materialangular-material-5
Generaldeep
Generaldeep

Reputation: 445

Make Angular Material Grid Responsive (again)

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?

Upvotes: 1

Views: 668

Answers (1)

Vikas
Vikas

Reputation: 12036

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

Upvotes: 4

Related Questions