title: Async data not available in material bottom sheet component when also injecting data
body: <p>When I pass custom data via the optional config object in material bottom sheet <code>[open][1]</code> method, my component data - if loaded asynchronously, is not available / doesn't render. If I hardcode the component data or don't pass a config object to the open function, the component data loads.</p>
  
  <p><strong>teams.component.ts - contains bottom sheet open method</strong></p>
  
  <pre><code>export class TeamsComponent implements OnInit {
    teams: Team[];
    constructor(
      private teamService: TeamService,
      private messageService: MessageService,
      private bottomSheet: MatBottomSheet
    ) { }
  
      showActiveDivisionsInBottomSheet() {
          const ref = this.bottomSheet.open(ActiveDivisionsComponent, {
            data: { heading: 'Switch to new division' },
          });
      }
  }
  </code></pre>
  
  <p><strong>teams.component.html</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let team of teams"&gt;
      {{ team.name }}
      &lt;button (click)="showActiveDivisionsInBottomSheet()" mat-raised-button&gt;{{ team.division.name }}&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>active-divisions.component.ts - the component passed to the material bottom sheet</strong></p>
  
  <pre><code>export class ActiveDivisionsComponent implements OnInit {
    divisions: Division[];
    constructor(
      @Inject(MAT_BOTTOM_SHEET_DATA) public data: any,
      private divisionsService: DivisionsService
    ) { }
    ngOnInit() {
      this.getDivisions();
    }
    getDivisions(): void {
      this.divisionsService.getDivisions()
        .subscribe(response =&gt; this.divisions = response['data']);
    }
  }
  </code></pre>
  
  <p><strong>active-divisions.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;{{ data.heading }}&lt;/h1&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let division of divisions"&gt;
      {{ division.name }}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here, only the heading passed in through the config parameter of the bottom sheet <code>open()</code> method is rendered. Remove this config option and the divisions are loaded.</p>
  
  <p>However - hardcode the divisions array in active-divisions.component rather than fetch it from the service:</p>
  
  <pre><code>divisions: Division[] = [
      {id: 1, name: 'Pool A'},
      {id: 2, name: 'Pool B'}
    ];
  </code></pre>
  
  <p>And both the data passed to the bottom sheet component, and the divisions array now render.</p>
  
  <p>For this example I could obviously put the heading within the active-divisions component, but in reality I'll be passing the current division of the selected team, so that it can pre populate the bottom sheet.</p>