See the below code,
@Component({
template: `<div *ngIf="loggedIn">show this when logged in</div>
<div> other content </div>
<router-outlet></router-outlet>`,
providers: [UserService]
})
class App{
private loggedIn:boolean;
}
@Injectable()
class UserService{
loggedIn:boolean = false;
getIsLoggedIn(){return this.loggedIn;}
setLoggedIn(){this.loggedIn = true;}
}
@Component({
template: '<div (click)="login()"></div>'
})
class LoginComponent{
login(){userService.setLoggedIn();}
}
bootstrap(App);
Consider that by default router config takes to login component. I have omitted some dependency injection code too (so that is not an error). Now I want that the div in App component show be visible only when UserService's loggedIn variable becomes true.
I have seen directive variable watching but not sure how to do that across components and with service.
