title: angular 2 ngIf with observable?
body: <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>