angular 2 ngIf with observable?

Question

I have a very simple service and its job is to get either 200 or 401 from api/authenticate url.

auth.service.ts

@Injectable()
export class AuthService {

    constructor(private http: Http) {

    }

    authenticateUser(): Observable<any> {
        return this.http.get(AppSettings.authenitcationEnpoint)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(response: Response) {
        let body = response;
        return body || {};
    }

    private handleError(error: Response) {
        let errMsg: string;
        if (error instanceof Response) {
            errMsg = `${error.status} - ${error.statusText || ''}`;
        } else {
            errMsg = error.toString();
        }
        return Observable.throw(errMsg);
    }
}

now I want to use this in my html I know I can create a subscriber and based on response or error code set a variable but my problem is I will have to duplicate the code all over the place. I want very simple

<div *ngIf="authService.AuthenticateUser()">my content</div>

If its 401 which is coming from handleError then hide otherwise show the div.

Its like getting boolean value from Observable. I also have AuthGuard.

authguard.ts

@Injectable()
export class AuthGuard implements CanActivate {

    private isActive: boolean = true;
    constructor(private authService: AuthService, private router: Router) {
    }

    canActivate(): boolean {
        this.authService.authenticateUser()
            .subscribe(() => {},
            error => {
                if (error.indexOf("401") >= 0) {
                    let link = ['contactus'];
                    this.router.navigate(link);
                    this.isActive = false;
                }
            });
        return this.isActive;
    }   

}

I cannot use authGuard.canActive() as well in ngIf. Is there any easier way to do it without duplicating code. I am pretty sure AuthGuard is not working as it must return true everytime because subscribe will take time.

app.component.ts

export class AppComponent {
    private isAuthenticated: boolean = false;

    constructor(private authService: AuthService,private authGuard: AuthGuard) {
        this.authService.authenticateUser()
            .subscribe(response => {
                if (response.status == 200)
                    this.isAuthenticated = true;
            },
            error => {
                if (error.indexOf("401") >= 0)
                    this.isAuthenticated = false;
            });
    }
}

home.component.ts

export class HomeComponent implements OnInit {

    constructor(private http: Http, private authService: AuthService, private utilityService: UtilityService, private homeService: HomeService, private factoryService: FactoryService, private supplierService: SupplierService, private businessAreaService: BusinessAreaService, private router: Router) {
        this.authService.authenticateUser()
            .subscribe(response => {
                if (response.status == 200)
                    this.isAuthenticated = true;
            },
            error => {
                if (error.indexOf("401") >= 0)
                    this.isAuthenticated = false;
            });
        this.customData = new CustomData(http);
    }
}

As you can see alot of duplicated code. I am trying to avoid duplication.

When I call my api a pop up appears to enter windows username/password for windows Authentication. I dont get 401 until I cancel that pop up. so I want to hide my menu + home component.

In my service I get response:200 in map and unauthorized:401 in catch block

Where is this ngIf coming from ? A component I assume ? It would be nice to have the .ts of that component. — maxime1992
And if you don't subscribe to an observable, you'll never have any result. — maxime1992
Finally, once you have a component that fetches the result of an http call (from a service), you can either subscribe to it and save the value to display it into your view OR use the async pipe. — maxime1992

Bruno João Bruno João · Accepted Answer · 2016-12-05T15:55:40

Here, you are returning an observable and not the value:

authenticateUser(): Observable<any> {
    return this.http.get(AppSettings.authenitcationEnpoint)
        .map(this.extractData)
        .catch(this.handleError);
}

What you should do is create a property in your service and then use this property in your html and not the function that subscribes to the observable. Something like:

@Injectable()
export class AuthService {

    isAuthenticated: boolean = false; //The variable

    constructor(private http: Http) {
    }

    authenticateUser(): Observable<any> {
        return this.http.get(AppSettings.authenitcationEnpoint)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(response: Response) {
        let body = response;
        this.isAuthenticated = body.isAuthenticated; //here you assign a value to variable
        return body || {};
    }

    private handleError(error: Response) {
        let errMsg: string;
        if (error instanceof Response) {
            errMsg = `${error.status} - ${error.statusText || ''}`;
        } else {
            errMsg = error.toString();
        }
        return Observable.throw(errMsg);
    }
}

And then, in your html, just use:

<div *ngIf="authService.isAuthenticated">my content</div>

Another way of doing this is using the async pipe. So, the view will wait the observation to return before make digest cicle. Something like:

<div *ngIf="authService.AuthenticateUser() | async">my content</div> // Here you use the async pipe

angular 2 ngIf with observable?

1 Answers