Toggle Element on HTTP response

Question

I'm pretty new with Angular 2. I'm working on angular2 + node js setup. In project its a simple authentication call. What I want is to show a div block if login api returns an error.

Here is what I have done.

LoginComponent

private loginResponse: any;
private submitted: boolean;
private error: boolean = false;
private errorMessage: string;
public loginForm: FormGroup;

ngOnInit() {
    // if user is authenticated, redirect him/her to dashboard
    if (this.auth.isAuthenticated()) {
        this.router.navigate(['dashboard'])
    }
    this.submitted = false;
}

// authenticate user
getLogin() {
    // return if form is invalid
    if (!this.loginForm.valid) {
        return false;
    }
    this.submitted = true;
    var formData = this.loginForm.value;
    this.auth.login(formData.email, formData.password, this.translate.currentLang)
        .subscribe(
            (data: Response) => {
                this.loginResponse = data;
                if (this.loginResponse.result) {
                    localStorage.setItem('token', this.loginResponse.data);
                    window.location.reload();
                } 
                this.submitted = false;
                this.error = true;
                this.errorMessage = this.loginResponse.message;
            },
            err => {
                console.log(err);
            }
        );
}

LoginComponent.html

<form [formGroup]="loginForm" id="sign_in" (ngSubmit)="getLogin()" autocomplete="false">
            <div *ngIf="error" class="text-danger text-justify msg">
                {{ errorMessage }}
            </div>

Issue is, when server returns result false, I'm setting error property to true but it does not show any effect.

Answer 1

This could be due to private error: boolean = false;:

As per the docs:

When a member is marked private, it cannot be accessed from outside of its containing class

and since templates do not exist within component classes, but outside of them this could be the reason you have this issue.

You could try changing your code to something like this:

private loginResponse: any;
private submitted: boolean;
private errorMessage: string;
public loginForm: FormGroup;

error: boolean;

ngOnInit() {
    // if user is authenticated, redirect him/her to dashboard
    if (this.auth.isAuthenticated()) {
        this.router.navigate(['dashboard'])
    }
    this.submitted = false;
}

// authenticate user
getLogin() {
    // return if form is invalid
    if (!this.loginForm.valid) {
        return false;
    }
    this.submitted = true;
    var formData = this.loginForm.value;
    this.auth.login(formData.email, formData.password, this.translate.currentLang)
        .subscribe(
            (data: Response) => {
                this.loginResponse = data;
                if (this.loginResponse.result) {
                    localStorage.setItem('token', this.loginResponse.data);
                    window.location.reload();
                    this.error = false;
                } 
                this.submitted = false;
                this.error = true;
                this.errorMessage = this.loginResponse.message;
            },
            err => {
                console.log(err);
            }
        );
}

changed to error: boolean; and added this.error = false if response is ok.