0

Angular7

My app.component has "noShow" variable which show/hides the element. Here is the app.component.html:

<div>

<strong *ngIf="!noShow" style="text-align:right;">
    Welcome {{user ? user.username : ''}}
</strong>
<strong *ngIf="noShow" style="text-align:right;">
    Hi {{user ? user.username : ''}}
</strong>

I am setting the value of "noShow" at app.component.ts but through receiving that a share message service implemented over 'rxjs/BehaviorSubject.

Here is the portion of app.component.ts:

export class AppComponent implements OnInit {

constructor(private _http: HttpClient, private _cdr: ChangeDetectorRef, private router: Router
, private share:ShareService) {}

public noShow: boolean = false
ngOnInit() {
this.share.currentMessage.subscribe(message=>this.noShow = message)
// blah blah
}
}

If the value of "noShow" is toggled, I receive:

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

I understand that this happens when view just load with initial value of noShow as False and then the value was changed immediately,however, no luck with resolving this issue.

This do not impact the view, it is working fine, but the error leaves bad taste when we see console logs in browser.

Thanks

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Chirag Dhyani
  • 863
  • 11
  • 24
  • Probably duplicate of this - [https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained](https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained) – indrajeet Jul 24 '19 at 15:10
  • https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained/62564534#62564534 – Safal Pillai Jun 25 '20 at 05:52

1 Answers1

0

please change service method in 'rxjs/BehaviorSubject' to rxjs/Subject

siva kumar
  • 569
  • 1
  • 3
  • 13