I have an Angular 10 application, I am trying to remove the navside component from the login component, so I created a service on the nave side component contains this code :

```js
visible: boolean;

  constructor() {
    this.visible = true;

  }
  show() {
    this.visible = true;

  }
  hide() {
    this.visible = false;
  }
  toggle() {
    this.visible = !this.visible;
  }
  doSomethingElseUseful() { }

```

and inside the naveside component i put :

```js
export class NavsideComponent implements OnInit {

  constructor(public sr: ServService ) { }

  ngOnInit(): void {

  }

```

and the Html component :

```html
<div *ngIf="sr.visible">
    <mat-sidenav-container class="example-container">
        <mat-sidenav #sidenav mode="push" class="app-sidenav" opened>
            <mat-toolbar class="co">
                <span class="toolbar-filler"></span>

.
.
.
.
.
. </div>

```

but this error was displayed :

```
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

```

**EDIT 1**

Login.component.ts

```js
import { Component, OnInit } from '@angular/core';
import { ServService } from '../../navside/serv.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor( private sr :ServService) { }

  ngOnInit(): void {
    this.sr.hide();
    this.sr.doSomethingElseUseful();
  }

}

```

**EDIT 2**

Stackblitz putting together the snippets above, where the warning can be seen:

<https://stackblitz.com/edit/angular-ivy-vbkytu?file=src/app/login/login.component.ts>