TheLazy.Dev
Portfolio GitHub

Blog

angular |beginners |laravel |webdev

Flash Messages in Laravel with Angular Material

readymadecode

Chetan Rohilla

Posted on March 21, 2022

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.

  • 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">
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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;

});
Enter fullscreen mode Exit fullscreen mode

Adding Route in routes/web.php file 

Route::get('/', [UserController::class, 'welcome']);
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

Add toast html inside body of your layout 

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

</div>
Enter fullscreen mode Exit fullscreen mode

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.

Thanks:)
Happy Coding:)

💖 💪 🙅 🚩
readymadecode
Chetan Rohilla

Posted on March 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Flash Messages in Laravel with Angular Material
angular Flash Messages in Laravel with Angular Material

March 21, 2022