Flash Messages in Laravel with Angular Material
Tags: angular, beginners, laravel, webdev
Published: 2022-03-21 10:09:32

Sometimes, We requires to show messages in our website like Form Submitting Success Messages, Updates Messages, Alert Messages, Notification Messages etc. Using native javascript alert messages has become old fashion. So, here we will show flash messages in laravel with angular material in our application.

- Using Laravel version 8 but you can implement this tutorial in any laravel version
- Angular js 1.7.6 version and Angular Material version 1.1.12.
- Using [Laravel Session](https://laravel.com/docs/8.x/session) to create dynamic flash messages
- Using [$mdToast](https://material.angularjs.org/latest/api/service/$mdToast) angular js service in angular material

## Angular Material Toast With Laravel

## Adding Native Library of Angular Material

Paste this code in head section of your layout.
```html
<!-- Angular Material style sheet -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
```

Then Paste this code before the end of body section of your layout

```html
<!-- angular material -->
    
    <!-- Angular Material requires Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.3/angular-material.min.js"></script>
    <!-- angular material -->
```

Create **app.js** file inside **public/angular** directory and paste the code given below

```typescript
var angularApp = angular.module('angularApp', angularLibs, function($interpolateProvider) {
   $interpolateProvider.startSymbol('<%'); $interpolateProvider.endSymbol('%>');
});

angularApp.config(function($mdThemingProvider) {
$mdThemingProvider.theme('altTheme')
.primaryPalette('green')
.accentPalette('blue')
.warnPalette('pink')
.backgroundPalette('brown');

$mdThemingProvider.setDefaultTheme('altTheme');
});
```

Create **notification_factory.js** file inside **public/angular/factory** directory and paste the code given below.

```typescript
angularApp.factory('notificationFactory', function ( $mdToast) {

var factory = {};

factory.showActionToast = function(msg, position) {
    var toast = $mdToast.simple()
    .textContent(msg)
    .action('close')
    .highlightAction(true)
    .hideDelay(5000000)
    .highlightClass('md-accent')
    .position(position);
    $mdToast.show(toast).then(function(response) {
        if ( response == 'close' ) {

        }
    });
}

return factory;

});
```

## Adding Route in routes/web.php file

```php
Route::get('/', [UserController::class, 'welcome']);
```

## Create UserController in app/Http/Controllers and create a function
```php
use Illuminate\Http\Request; //add this namespace at top

//This function inside controller

public function welcome(Request $request){
$message = ['type' => 'success', 'content' => 'Task was successful!'];

    $request->session()->flash('message', $message);

    return view('welcome');
}
```

## Add toast html inside body of your layout

```html
<div ng-controller="toastCtrl" layout-fill layout="column" class="inset" ng-cloak>

</div>
```
Add **ng-app=”angularApp”** attribute in body tag of your layout.

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)