Question

171

Displaying bootstrap alert using angular2

rated 0 times [ 176] [ 5] / answers: 1 / hits: 17891 / 8 Years ago, sat, june 18, 2016, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hollievalerier

Add To Favorites

Follow

Total Points: 431

Total Questions: 93

Total Answers: 105

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

answered 8 Years ago elishaannac · Accepted Answer

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;

            }

        });

    }

}