What does Angular Material's dashboard schematic boilerplate code do?

Question

I used an Angular schematic (ng generate @angular/material:dashboard) to generate the following code in the component.ts file:

cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map(({ matches }) => {
  if (matches) {
    return [
      { title: 'Card 1', cols: 1, rows: 1 },
      { title: 'Card 2', cols: 1, rows: 1 },
      { title: 'Card 3', cols: 1, rows: 1 },
      { title: 'Card 4', cols: 1, rows: 1 }
    ];
  }

  return [
    { title: 'Card 1', cols: 2, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 2 },
    { title: 'Card 4', cols: 1, rows: 1 }
  ];
})

);

However I'm having trouble understanding what it's doing. There are several components that cause some confusion:

What is the => syntax doing? I had trouble coming up with a Google search since it is a symbol. EDIT: The answer to this is here
What is the map function doing? I understand map, but normally I'm mapping a function to a set of values. Is that what is happening here? Said another way, what is being mapped onto what?
What is the pipe function doing here? From this post I understand:

The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.

However it's not clear to me what the composed functions are doing here.

score 3 · Accepted Answer · edited Apr 27 '20 at 00:46

3

The pipe simply allow you to combine mutiple functions. Instead of having :

f1(f2(f3(param)));

You'll have:

pipe(f1, f2, f3)(param);

Here is a good explanation : How pipe works

The map is part of rxjs, a set of tool, it will project each item of an observable. Here the related docuentation : Understanding map. Here, matches is a special attribute of Angular which is true when the conditions inside observe are true. Matches is being mapped into the if condition. In this case, if the breakpointObserver detects that the screen is smaller than handset, matches will be true and subsequently only a single column of cards will be returned. Otherwise, the if condition resolves to false and the two column version is returned. See this blog for a detailed explanation.
The arrow function (lambda) is just a way to write a function, so instead of:

Observable.map(item => {//do something});

You could have :

Observable.map(function(item) {//do something});

Be aware that the arrow function hide some behaviors I wouldn't risk myself to explain, but in React (since you added the tag), the arrow function allow you to bind a method to 'this' without having to do it the old way(const myFunc = this.myFunc.bind(this))

edited Apr 27 '20 at 00:46

Grant Curell

1,321
2
16
32

answered Apr 27 '20 at 00:13

Quentin Grisel

4,794
1
10
15

Thanks man - one part still gets me though: from that documentation on map it's clear what function is being mapped onto what. Here it just has one argument `matches`. Then there's an if (matches). What does that mean? – Grant Curell Apr 27 '20 at 00:24
I meant to just suggest an edit where I answered my own comment - but I'm not sure I did it right . Let me know if you get the suggestion. – Grant Curell Apr 27 '20 at 00:45
Yes it's good thank you ! I'm not a native english speaker, i don't understand everything properly in your example so i was doing research haha. Thanks for the link i'll check it for sure – Quentin Grisel Apr 27 '20 at 00:50
hahaha no problem at all man. As a fellow language learner, I definitely know what it's like to read technical material in another language. Not always easy. – Grant Curell Apr 27 '20 at 00:56

What does Angular Material's dashboard schematic boilerplate code do?

1 Answers1