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.


Recommended

How to Create Multiple Parameters Dynamic Routes in Laravel

Laravel 8 Multiple Database and Resource Routes with Controllers

Optimize Database Queries in Laravel

Read For more Tutorials about Laravel

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedIn.