Is there a way i can position Snackbar inside @ngmodule?

Question

I'm using snackbar in multiple components so i decided to set duration in main module and i want to add position as top

Here is my app.module.ts


import { MatSnackBar, MatSnackBarVerticalPosition, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
.
.

@NgModule({
  declarations: [],
  imports: [],
  providers: [
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 1500}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

 }

Edit: The snackbar method is same in another component.When i add it to the component method it shows an error:

Argument of type '{ verticalPosition: any; }' is not assignable to parameter of type 'string'.

Same happened when i added duration.

CommodityComponent

import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';


@Component({})
export class CommodityListComponent implements OnInit {

 displayedColumns: string[] = [''];
 
 verticalPosition: MatSnackBarVerticalPosition = 'top';

 constructor(public svc: CommodityServiceService, private dialog: MatDialog,private _snackBar: MatSnackBar) { }
   getList() {
     this.svc.getCommodities();
   }

 ngOnInit() {
   this.getList();
 }
 Edit(e:any) {
  this.svc.Edit(e);
  const conf = new MatDialogConfig();
  conf.width = "30%";
  this.dialog.open(CommodityComponent, conf);
}
 openDialog() {
  this.svc.form.reset();
  const conf = new MatDialogConfig();
  conf.width = "30%";
  this.dialog.open(CommodityComponent, conf)
}
DeleteCommodity(e: any){
  debugger
  this.svc.DeleteRecord(e).subscribe(e => {
    this.openSnackBar("Record Deleted");
    this.svc.getCommodities();
  });
}
openSnackBar(message: string) {
  this._snackBar.open(message);
  
}
}

I'm using angular 12.0.1

You could create a custom component wrapper/service (I don't remember how snackbar works) that contains the snackbar options and always use it rather than the original one. — Gaël J, Jul 06 '21 at 17:14
i added position to my opensnackbar method but its showing ` Argument of type '{ this: any; top: any; }' is not assignable to parameter of type 'string'. ` — , Jul 06 '21 at 17:17
same happened when when i added duration to this method, so i added duration inside ngModule — , Jul 06 '21 at 17:20
If needed, there are some good examples on the official documentation: https://material.angular.io/components/snack-bar/examples — Gaël J, Jul 06 '21 at 17:45
Fixed it, added action to the method and then it stopped showing error for position and duration — , Jul 06 '21 at 18:02

score 0 · Answer 1 · answered Jul 07 '21 at 02:39

In my case i have not added action string to my openSnackbar method it looked something like this:

openSnackBar(message: string) {
  this._snackBar.open(message,{
    verticalPosition:this.verticalPosition
  }
 );  
}

i think it was expexting action that's why it was showing me an error.So, i added action: string parameter and passed "" as an argument and my method looked something like this:

openSnackBar(message: string,Action:string) {
  this._snackBar.open(message,Action,{
    verticalPosition:this.verticalPosition
  }
  );
}

and it works!

Is there a way i can position Snackbar inside @ngmodule?

1 Answers1