Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to obtain data property from MatSnackBarConfig

I've read in the documentation, that MatSnackBarConfig object could have a data property which represents

Data being injected into the child component.

So I guess I can use those data inside a custom snack-bar opened via openFromComponent method. The question is can I do that? If yes, then how can I do that?

Having an example provided in the documentation, let's say I modify the openSnackBar method to the following:

app/snack-bar-component-example.ts

openSnackBar() {
  this.snackBar.openFromComponent(PizzaPartyComponent, {
    duration: 500, data: {message: 'Hello World!'}
  });
}

Now, how could I obtain the data object within the PizzaPartyComponent? I've tried to inject it to the component's constructor but it couldn't be resolved.

//below code results in error

export class PizzaPartyComponent {
  constructor(private data: any) { 
    console.log(data); 
  }
}
like image 961
Jakub Ch. Avatar asked Dec 12 '17 00:12

Jakub Ch.


1 Answers

I found the solution on material's github page.

It turned out that I had injected the data in a wrong manner. The proper one was:

import {MAT_SNACK_BAR_DATA} from '@angular/material';

// @Component decorator omitted
export class PizzaPartyComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
}
like image 124
Jakub Ch. Avatar answered Nov 16 '22 02:11

Jakub Ch.