Displaying bootstrap alert using angular2

Question

I want to display Bootstrap alert when the user has saved the data.

my code is as below:

html page:

<div class="alert alert-success" *ngIf="saveSuccess">
    <strong>Success!</strong>
</div>
<form #f="ngForm" (submit)="saveUser(f.value)">
        /////Some form fields
    <button class="form-control btn btn-primary" type="submit">save</button>
</form>

app.component.ts:

export class UserProfileComponent{
 saveSuccess: boolean;
 user: IUser;

saveUser(user:IUser) {
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.editUserForm = user;
    this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
        headers: this.headers
    }).subscribe(function(data) {

        // if the update is successful then set the value to true
        // this is getting updated
        if (data){
            this.saveSuccess = true;
        }
        else{
            this.saveSuccess = false;
        }
    });
}

}

I want to display the alert when a successful POST is done.

I think i am missing how to bind the 'saveSuccess' variable to html so that alert can be displayed when the successful save is done. (I am new to Angular2)

Looks fine to me - what doesn't work? Any errors in console? — Maximilian Riegler
– Maximilian Riegler, Commented Jun 19, 2016 at 1:24
No errors. I dont think it will give error. As 'saveSuccess' variable is getting updated and depends on that 'div' will be displayed. — Pradeepb
– Pradeepb, Commented Jun 19, 2016 at 9:37
@Pradeepb This method doesn't work for me. Can you share plunker if possible? — SKL
– SKL, Commented Aug 21, 2017 at 16:48
@Pradeepb I did samething as you done here. I got no error and alert box is showing always. Any idea? — SKL
– SKL, Commented Aug 21, 2017 at 16:53

Maximilian Riegler · Accepted Answer · 2016-06-19 10:25:42Z

5

Last night I didn't see it, it was probably too late. But your problem is not having the this context in the inline function where you set saveSuccess.

I'd suggest you use lambdas or "fat arrow function". Instead of

function(data) { ... }

you do

(data) => { ... }

This way the this context will be preserved. Just use it wherever you need inline function and you will have no problems anymore! :)

Your code with the lambda function:

export class UserProfileComponent{
    saveSuccess: boolean;
    user: IUser;

    saveUser(user:IUser) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.editUserForm = user;
        this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
            headers: this.headers
        })
        .map((data: Response) => data.json) // <-- also add this to convert the json to an object
        .subscribe((data) => { // <-- here use the lambda

            // if the update is successful then set the value to true
            // this is getting updated
            if (data){
                this.saveSuccess = true;
            }
            else{
                this.saveSuccess = false;
            }
        });
    }
}

answered Jun 19, 2016 at 10:25

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pradeepb Over a year ago

Thanks a lot. You saved my day :) Is there any guide/tutorials for getting to know such knowledge? any input would be appreciated :)

Maximilian Riegler Over a year ago

This is a pretty good one: basarat.gitbooks.io/typescript/content/docs/tips/main.html

Dudi · Accepted Answer · 2017-08-06 17:00:00Z

1

Consider this dynamic alert component:

Angular2 Service which create, show and manage it's inner Component? How to implement js alert()?

for example: .

this.alertCtmService.alertOK("Save changes???").subscribe(function (resp) {
    console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
    this.saveData();
}.bind(this) );

See this Demo here

answered Aug 6, 2017 at 17:00

Dudi

3,0891 gold badge29 silver badges23 bronze badges

Collectives™ on Stack Overflow

Displaying bootstrap alert using angular2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related