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, Jun 19 '16 at 01: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, Jun 19 '16 at 09:37
@Pradeepb This method doesn't work for me. Can you share plunker if possible? — SKL, Aug 21 '17 at 16:48
@Pradeepb I did samething as you done here. I got no error and alert box is showing always. Any idea? — SKL, Aug 21 '17 at 16:53
If you can make plunker then I or anyone can have a look and might be able to help you. — Pradeepb, Aug 21 '17 at 17:23

score 5 · Accepted Answer · answered Jun 19 '16 at 10:25

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;
            }
        });
    }
}

Thanks a lot. You saved my day :) Is there any guide/tutorials for getting to know such knowledge? any input would be appreciated :) — Pradeepb, Jun 19 '16 at 10:46
This is a pretty good one: https://basarat.gitbooks.io/typescript/content/docs/tips/main.html — Maximilian Riegler, Jun 19 '16 at 11:05

score 1 · Answer 2 · answered Aug 06 '17 at 17:00

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

Displaying bootstrap alert using angular2

2 Answers2