I want to change an HTML view via `*ngIf`, based on a local variable, which should change based on a variable delivered through an observable from a shared service.

HTML 

```html
<div class="login-container" *ngIf="!isAuthenticated">

```

TypeScript of same component:

```js
export class LoginComponent implements OnInit {
  authenticationsSubscription;
  isAuthenticated: boolean;

  constructor(
    private authService: AuthServiceService,
    private router: Router,
    private route: ActivatedRoute){}

  getAuth(): Observable<boolean>{
    return this.authService.validation();
  }

  ngOnInit() {
    this.authenticationsSubscription = this.authService.validation().subscribe(auth => this.isAuthenticated = auth);
  }
} 

```

TypeScript of shared service `AuthService`:

```js
export class AuthServiceService {
  isAuthenticated: boolean;

  validation(): Observable<boolean>{
    return of(this.isAuthenticated);
  }
}

```

While debugging I found out, the variable `isAuthenticated` in the LoginComponent does not change, on changes of the variable `isAuthenticated` of the AuthService. I also tried using `pipe()` and `tap()`, which did not change anything.

What am I doing wrong?