1

I am Working on angularJS2 project and i want to check the response from the RestAPI, Then i'll display the response of restAPI in bootstrap "alert-dismissible". My Code is as follows:

Template Html file(registration.component.html):

<div *ngIf="result && f.submitted" class="alert alert-danger alert-dismissible" role="alert"> 
        <span class="close" data-dismiss="alert">&times;</span>
        {{ result }} 

</div>

    <h2>Register</h2>

    <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
        // Form Code
    </form>

Typescript file(registration.component.ts):

register() {

    this.loading = true;
    this.userService.create(this.model)
    .subscribe(
            data => {

                this.result=data.message;
                this.loading = false;

            },
            error => {
                this.alertService.error(error);
                this.loading = false;
            });
}

I am getting the response from the server and my rest API working fine, I am able to display the response in alert-dismissible also. But, problem starts when i close the alert-dismissible and then resubmitting the form , i can see the response in the console but alert-dismissible is not showing. I know that the problem is in <div *ngIf="result && f.submitted" class="alert alert-danger alert-dismissible" role="alert">, please guide me how i can check the condition in the NGIF.

Vaibhav Sharma
  • 113
  • 1
  • 7
  • 1
    Have you tried resetting the form? - [Resetting a Form in Angular 2](http://stackoverflow.com/questions/36655922/resetting-a-form-in-angular-2-after-submit/36678286#36678286) – P. Moloney Jan 13 '17 at 08:29
  • 1
    AFAIK, bootstrap's jquery-based javascript will just remove this from the DOM completely, or hide it. You'd better deal the dismissal of the alert by yourself, instead of relying on bootstrap (i.e. set a flag to false to hide it when clicking the close button, and reset it to true when you want the alert to be displayed again). Or just use ng-bootstrap. – JB Nizet Jan 13 '17 at 08:29

0 Answers0