CODEWITHSUNDEEP
javascriptangularjs
vipe
vipe

Reputation: 231

Is there any better way to show success alert message

I am trying to show Success message , once the data is updated in my application. Success function is working properly , but message is not getting generated. when I click on the save() button, small alert box will display, but message wont appear.

HTML : <div class="alert alert-success" ng-show="successmessage">{{cts.success_info}}</div>

Angular Js: 

$scope.successmessage = function(){ 
   $scope.cts = [];
   $scope.cts.success_info = "Data Successfully got updated"; 
 }

Upvotes: 1

Views: 3440

Answers (5)

nick
nick

Reputation: 475

You can take advantage of *ngIf if want to display more then just simple string like below:

showMsg: boolean = false;

onSubmit() {
this.userService.createUser(this.addForm.value)
  .subscribe( data => {
    this.router.navigate(['list-user']);
    this.showMsg= true;
  });
}
then you can use showMsg boolean to show/hide dive like below

<div class="col-md-6">
  <div ng-click=="onSubmit()">

   <div class="row"  *ngIf="showMsg">
      <div class="col-xs-12">
         <p class="alert alert-success">
             <strong>Registration Success!</strong> Please click here to login!.

         </p>
      </div>
    </div>

    <button class="btn btn-success">Add user</button>
  </div>
</div>

note that I am using some bootstrap classes for styling.

Upvotes: 1

alexmac
alexmac

Reputation: 19587

You defined successmessage as a function, but using it as a value. If you need to display alert on success call of save function, use success function below. It creates an object with a message and isSuccess flag:

Html:

<div class="alert alert-success" ng-show="cts.isSuccess">{{ cts.message }}</div>

JS:

$scope.success = function() { 
  $scope.cts = {
    isSuccess: true,
    message: 'Data Successfully got updated'
  }; 
}

Working demo

Upvotes: 1

Akshay Kalola
Akshay Kalola

Reputation: 196

If you want to display in popup or modal, then there is best library in angular called ngDialog

Upvotes: 0

Kaustubh Khare
Kaustubh Khare

Reputation: 3510

Do this,

<div class="alert alert-success" ng-show='cts.showmsg == true'>{{cts.success_info}}</div>

You can use one boolean variable to show/hide message.

Angular Js:

$scope.successmessage = function(){ 
   $scope.cts = [];
   $scope.cts.success_info = "Data Successfully got updated";
   $scope.cts.showmsg = true;
 }

Upvotes: 0

subha
subha

Reputation: 424

Yes function must return something . If you want a better option , you can use toast or popover .

Upvotes: 0

Related Questions