Htykuut

I have a problem with Material Design Snackbar configuration. What I'm trying to achieve is to fire up Snackbar whenever there is a message about some functionality, for example: when I delete entry than message fire up and inform the user that everything was all right. It works as component and it appears as bootstrap alert, but I want it to be in snackbar.

Part of Category component:

delete(category: Category): void {

  this.categories = this.categories.filter(c => c !== category);

  this.categoryService.deleteCategory(category).subscribe();

}

Part of Category service:

      /** DELETE: delete the Category from the server */

  deleteCategory (category: Category | number): Observable<Category> {

    const CategoryId = typeof category === 'number' ? category : 

      category.id;

    const urlCategoryId = `${this.urlCategory}/${CategoryId}`;



    return this.http.delete<Category>(urlCategoryId, httpOptions).pipe(

      tap(_ => this.log(`Category has been deleted`)),

      catchError(this.handleError<Category>('deleteCategory'))

    );

  }





/**

   * Handle Http operation that failed.

   * Let the app continue.

   * @param operation - name of the operation that failed

   * @param result - optional value to return as the observable result

   */

  private handleError<T>(operation = 'operation', result?: T) {

    return (error: any): Observable<T> => {



      // TODO: send the error to remote logging infrastructure

      console.error(error); // log to console instead



      // // TODO: better job of transforming error for user consumption

      // this.log(`${operation} failed: ${error.message}`);



      // Let the app keep running by returning an empty result.

      return of(result as T);

    };

  }



  private log(message: string) {

    this.messageService.add(`${message}`);

  }

Message component:

    import { Component, OnInit } from '@angular/core';

    import {MessageService} from '../../services/message

           /message.service';



    @Component({

      selector: 'app-messages',

      templateUrl: './messages.component.html',

      styleUrls: ['./messages.component.scss']

    })

    export class MessagesComponent implements OnInit {



      constructor(public messageService: MessageService) { }



      ngOnInit(): void {

      }

    }

Message service:

    import {Injectable} from '@angular/core';

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



    @Injectable({

      providedIn: 'root'

    })



export class MessageService {

  messages: string = ;



  constructor(private snackBar: MatSnackBar) { }



  clear() {

    this.messages = ;

  }



  add(message: string) {

    this.snackBar.open(message, 'Close', {

      duration: 5000, horizontalPosition: 'right', verticalPosition: 

      'bottom', panelClass: 'snackbar-style'});

  }

}

in assets/custom.scss

    .snackbar-style {

      background-color: 'color of your choice' !important;

      color: 'color of your choice' !important;

    }

Message html:

 <div *ngIf="messageService.messages.length" class="alert alert-info 

    alert-with-icon" data-notify="container">

    <button type="button" aria-hidden="true" class="close" 

            (click)="messageService.clear()">

        <i class="now-ui-icons ui-1_simple-remove"></i>

    </button>

    <span data-notify="icon" class="now-ui-icons ui-1_bell-53"></span>

    <span data-notify="message">{{ messageService.messages }}</span>

</div>

Complete solution.

Thanks everyone (especially JB Nizet) for help!