title: Keeping variable in scope in Angular 9
body: <p>I come from AngularJS, I have just recently jumped to Angular 9.</p>
  
  <p>I have a toggle state (dark mode on or off) that I want to maintain and make available to all components.</p>
  
  <p>I toggle it in the root route, and it should keep the state for all the session and for all views and routes.</p>
  
  <pre><code>&lt;button (click)="darkmode()"&gt;Dark mode&lt;/button&gt;
  
  export class ExhibitorMainViewComponent implements OnInit {
  
    exhibitors = exhibitors;
  
    public dark:boolean = false;
    public body = document.getElementsByTagName('body')[0];
  
    constructor(
  
    ) { }
  
  
    darkmode = function() {
      this.dark = !this.dark;
      this.dark ? this.body.classList.add('dark') : this.body.classList.remove('dark');
    } 
  }
  </code></pre>
  
  <p>This will activate it for the component used in the root route, but it disappears once i go to a child component (other route) and when I come back also.</p>
  
  <p>I'm used to setting a $scope variable that will be available on all the app as long as I use the same controller.</p>
  
  <p>How does one manage this in Angular?</p>