title: Accessing Angular4 Router Data Property
body: <p>I'm trying to get my head around the Angular4 world. </p>
  
  <p>What I'm trying to do. I'm using Material2 and Flex and I want to pass with each route, if the sidebar should be open or closed when the route changes. I thought passing this with the <code>data</code>option was a viable option.</p>
  
  <p>The <code>AppComponent</code> holds the logic for this globally. </p>
  
  <p>I have defined my routes:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'home',
      component: HomeComponent,
      data: { showMenuDefault: true }
    }
  ]
  </code></pre>
  
  <p>And now I'm tring to access the <code>data</code> attributes in the object. </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import { MenuRoutes } from './app.routes';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
  
    opened;
    menuRoutes;
  
    constructor(private router:Router, private activeRoute:ActivatedRoute) {
      this.menuRoutes = MenuRoutes;
      this.opened = this.activeRoute.snapshot.data.showMenuDefault;
      console.log(this.opened)
    }
  
  }
  </code></pre>
  
  <p>I always get <code>undefined</code>. Could someone please hint me in the right direction?</p>