title: ExpressionChangedAfterItHasBeenCheckedError / Angular 4-Angular 7
body: <p>I updated my code from Angular 4 to Angular 7 and suddenly this error started emerging. There are soo many articles on the internet about this but non seems to work. Can someone please point me out why I am getting this error?
  Error comes in the Breadcrums</p>
  
  <p>My Error </p>
  
  <blockquote>
    <p>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'showBreadcrumbsSiteMetaData: false'. Current value: 'showBreadcrumbsSiteMetaData: true'.</p>
  </blockquote>
  
  <pre><code>at viewDebugError (core.js:20342)
  at expressionChangedAfterItHasBeenCheckedError (core.js:20330)
  at checkBindingNoChanges (core.js:20432)
  at checkNoChangesNodeInline (core.js:23307)
  at checkNoChangesNode (core.js:23292)
  at debugCheckNoChangesNode (core.js:23896)
  at debugCheckDirectivesFn (core.js:23824)
  at Object.eval [as updateDirectives] (HomeComponent.html:6)
  at Object.debugUpdateDirectives [as updateDirectives] (core.js:23813)
  at checkNoChangesView (core.js:23191)
  </code></pre>
  
  <p>Home.Component.html</p>
  
  <pre><code>&lt;div class="wrapper" &gt;
    &lt;navbar [metaData]="navBarMetadata" [userInfo]="navbarUserInfo" [helpButtonRoute]="navbarHelpButtonRoute"
          [menuItems]="sidebarRoutes" [settingsMenuItems]="settingsMenuItems"
          [languagesMenuItems]="languagesMenuItems"
          [rs_logo]="rs_logo"&gt;&lt;/navbar&gt;
      &lt;details-bar [breadscrumbsMetaData]="breadscrumbsMetaData" [breadcrumbsSiteMetaData]="breadcrumbsSiteMetaData"
               [showBreadcrumbsSiteMetaData]="showBreadcrumbsSiteMetaData"&gt;&lt;/details-bar&gt;
  
    &lt;div class="main-panel" #mainPanel (scroll)="onScroll($event)"&gt;
      &lt;div class="container "&gt;
        &lt;div class="current-component"&gt;
          &lt;simple-notifications [options]="notificationOptions"&gt;&lt;/simple-notifications&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Home.Component.ts</p>
  
  <pre><code> export class HomeComponent implements OnInit, AfterViewInit {
  
      notificationOptions: any = AppConstants.NOTIFICATION_OPTIONS;
      sidebarRoutes: NavbarRouteInfo[];
      settingsMenuItems: NavbarRouteInfo[];
      navBarMetadata: NavBarMetadata[];
      navbarUserInfo: NavBarUserInfo;
      navbarHelpButtonRoute: string;
      rs_logo: string;
      languagesMenuItems: LanguageInfo[];
      breadscrumbsMetaData: BreadscrumbMetadata[];
      breadcrumbsSiteMetaData: BreadscrumbMetadata[];
      showBreadcrumbsSiteMetaData: boolean;
      entityTypeList: RSEntityType[];
      @ViewChild('mainPanel') mainPanelDiv: ElementRef;
      activeAppKey: string;
      protected alive = true;
      private notificationTitles: { error: string };
  
      constructor(public notificationsManager: NotificationsManager,
            private authGuard: AppAuthGuard,
            private homeEventBus: HomeEventBus,
            private userManagementService: UserManagementService,
            private homeService: HomeService,
            private authService: AuthService,
            private activatedRoute: ActivatedRoute,
            private translate: TranslateService,
            private dataService: DataService) {
            this.breadcrumbsSiteMetaData = [];
            this.showBreadcrumbsSiteMetaData = false;
            this.activeAppKey = '';
            this.entityTypeList = [];
            this.initMessages();}
  
            initMessages() {
               this.translate.stream('home.msg').subscribe((res) =&gt; {
               this.notificationTitles = {
               'error': res['error']
               }
            }
       );
  
  }
  
  ngOnInit() {
  
      this.notificationsManager.showSpinner();
      this.translate.setDefaultLang
      (sessionStorage.getItem(AppConstants.LANGUAGE));
      this.subscribeEvents();
      this.initNavBar();
      this.initSideBar();
      this.initLanguageBar();
      this.notificationsManager.hideSpinner();
  }
  
  ngAfterViewInit() {
      this.initNavBar();
      if (((this.activeAppKey) === undefined || (this.activeAppKey) === null) || 
      this.activeAppKey.trim().length === 0) {
      this.activeAppKey = sessionStorage.getItem(AppConstants.APP_KEY);
      }
  
      if (this.authGuard.isAccessTokenDefined()) {
      this.dataService.loadUserIdEmailList(this.activeAppKey);
      }
  }
  
  initNavBar() {
      this.rs_logo = environment.API_BASE_URL + '/' + 'resources/internal-assets/images?name=rs-logo.png';
      this.setNavBarMetaData();
      this.navbarHelpButtonRoute = AppConstants.HELP_ROUTE;
      this.navbarUserInfo = new NavBarUserInfo('assets/img/default-avatar.png', '');
      this.loadUserImg();
   }
  
   setNavBarMetaData() {
       this.translate.stream('navbar').subscribe((res) =&gt; {
           this.navBarMetadata = [{
               path: 'profile',
               params: {},
               title: res['profile'],
               index: -1
           }];
       });
   }
  
  
  this.homeEventBus.breadcrumbsSiteMetaDataUpdateEvent$.subscribe(data =&gt; {
    if (data) {
      // this.fetchEntityTypes();
      this.showBreadcrumbsSiteMetaData = true;
    } else {
      // this.breadcrumbsSiteMetaData = [];
      this.showBreadcrumbsSiteMetaData = false;
    }
  });
  </code></pre>