angular 2 ngIf with observable?
<p>I have a very simple service and its job is to get either 200 or 401 from api/authenticate url.</p>

<blockquote>
  <p>auth.service.ts</p>
</blockquote>

<pre><code>@Injectable()
export class AuthService {

    constructor(private http: Http) {

    }

    authenticateUser(): Observable&lt;any&gt; {
        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);
    }
}
</code></pre>

<p>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</p>

<pre><code>&lt;div *ngIf="authService.AuthenticateUser()"&gt;my content&lt;/div&gt;
</code></pre>

<p>If its 401 which is coming from handleError then hide otherwise show the div.</p>

<p>Its like getting boolean value from Observable. I also have AuthGuard.</p>

<blockquote>
  <p>authguard.ts</p>
</blockquote>

<pre><code>@Injectable()
export class AuthGuard implements CanActivate {

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

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

}
</code></pre>

<p>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.</p>

<blockquote>
  <p>app.component.ts</p>
</blockquote>

<pre><code>export class AppComponent {
    private isAuthenticated: boolean = false;

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

<blockquote>
  <p>home.component.ts</p>
</blockquote>

<pre><code>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 =&gt; {
                if (response.status == 200)
                    this.isAuthenticated = true;
            },
            error =&gt; {
                if (error.indexOf("401") &gt;= 0)
                    this.isAuthenticated = false;
            });
        this.customData = new CustomData(http);
    }
}
</code></pre>

<p>As you can see alot of duplicated code. I am trying to avoid duplication.</p>

<p>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.</p>

<p>In my service I get response:200 in <strong>map</strong>
and unauthorized:401 in <strong>catch</strong> block</p>