Enhancing User Experience with Angular Snackbar Notifications

---
name: Enhancing User Experience with Angular Snackbar Notifications
version: "1.0"
category: Angular Cursor Rules
description: Implement Angular Material Snackbar for displaying brief notifications to enhance user interaction.
---
rule_definition:
  - description: "Ensure Angular Material is installed and imported in the project."
    implementation: |
      ```bash
      ng add @angular/material
      ```
  - description: "Create a shared Snackbar service to manage notifications across the application."
    implementation: |
      ```typescript
      // snackbar.service.ts
      import { Injectable } from '@angular/core';
      import { MatSnackBar } from '@angular/material/snack-bar';

      @Injectable({
        providedIn: 'root',
      })
      export class SnackbarService {
        constructor(private snackBar: MatSnackBar) {}

        showMessage(message: string, action: string = 'Close', duration: number = 3000): void {
          this.snackBar.open(message, action, {
            duration,
            panelClass: ['default-snackbar'],
          });
        }
      }
      ```
  - description: "Define CSS classes for different notification types to enhance visual feedback."
    implementation: |
      ```css
      /* styles.css */
      .default-snackbar {
        background-color: #323232;
        color: #ffffff;
      }
      .success-snackbar {
        background-color: #4caf50;
        color: #ffffff;
      }
      .error-snackbar {
        background-color: #f44336;
        color: #ffffff;
      }
      .warning-snackbar {
        background-color: #ff9800;
        color: #ffffff;
      }
      ```
  - description: "Extend the Snackbar service to include methods for success, error, and warning messages."
    implementation: |
      ```typescript
      // snackbar.service.ts
      import { Injectable } from '@angular/core';
      import { MatSnackBar } from '@angular/material/snack-bar';

      @Injectable({
        providedIn: 'root',
      })
      export class SnackbarService {
        constructor(private snackBar: MatSnackBar) {}

        showMessage(message: string, action: string = 'Close', duration: number = 3000, panelClass: string = 'default-snackbar'): void {
          this.snackBar.open(message, action, {
            duration,
            panelClass: [panelClass],
          });
        }

        showSuccess(message: string, action: string = 'Close', duration: number = 3000): void {
          this.showMessage(message, action, duration, 'success-snackbar');
        }

        showError(message: string, action: string = 'Close', duration: number = 3000): void {
          this.showMessage(message, action, duration, 'error-snackbar');
        }

        showWarning(message: string, action: string = 'Close', duration: number = 3000): void {
          this.showMessage(message, action, duration, 'warning-snackbar');
        }
      }
      ```
  - description: "Inject the Snackbar service into components to display notifications."
    implementation: |
      ```typescript
      // example.component.ts
      import { Component } from '@angular/core';
      import { SnackbarService } from './snackbar.service';

      @Component({
        selector: 'app-example',
        templateUrl: './example.component.html',
      })
      export class ExampleComponent {
        constructor(private snackbarService: SnackbarService) {}

        onActionSuccess(): void {
          this.snackbarService.showSuccess('Action completed successfully.');
        }

        onActionError(): void {
          this.snackbarService.showError('An error occurred during the action.');
        }

        onActionWarning(): void {
          this.snackbarService.showWarning('Warning: Check your input.');
        }
      }
      ```
  - description: "Ensure that the Snackbar service is provided in the root module to be available application-wide."
    implementation: |
      ```typescript
      // app.module.ts
      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
      import { MatSnackBarModule } from '@angular/material/snack-bar';
      import { AppComponent } from './app.component';
      import { SnackbarService } from './snackbar.service';

      @NgModule({
        declarations: [AppComponent],
        imports: [
          BrowserModule,
          BrowserAnimationsModule,
          MatSnackBarModule,
        ],
        providers: [SnackbarService],
        bootstrap: [AppComponent],
      })
      export class AppModule {}
      ```