Flash Messages in Laravel with Angular Material

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.

In this tutorial, we are:

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 to create dynamic flash messages
Using $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.

    <!-- 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

    <!-- 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

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.

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

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

Create UserController in app/Http/Controllers and create a function

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

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

</div>

Add ng-app=”angularApp” attribute in body tag of your layout.

That’s it Now you can show Flash Messages in Laravel with Angular Material.