Flash Messages in Laravel with Angular Material

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.

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

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.

ReadyMadeCode
Author: ReadyMadeCode

ReadyMadeCode.com is a website where you can find Free Online Tutorials - Website Development Tutorials, App Development Tutorials, Coding Tutorials,Website Designing and Development From popular programming languages or scripts or framework like php, laravel, html, css, javascript, nodejs, java, angularjs etc. Download Emails | E-Books.

View All Posts From ReadyMadeCode
Author Website : https://www.readymadecode.com

Enter Your Comments Here...

Enter Your Comments Here...

Scroll to top

Subscribe For Latest Updates

Enter your email address to subscribe and receive notifications of posts & updates by email.


Want a Website / App / Digital Marketing Solution

Website & App Development Packages

%d bloggers like this:
We have updated our memberships. Please check here
Close X