title: Populating an Angular Material Dialog with data from another component
body: <p>I have an Angular Material application as a class assignment. The premise is a computer repair shop with a list of services. The user checks the services they want and clicks the Calculate button, and then an invoice pops up with the services the user has chosen and a total  cost for those services. I have the list of services set up in one component, and when the user clicks on what they want those object values are captured. I have the Material Dialog for the invoice in another component. I haven't written the code yet that actually adds together the price of the services. My goal right now is for the invoice to list the chosen services. When I click the calculate button, the invoice pops ups but doesn't list any services, so it appears the data from the first component is not reaching the second component. Can anyone help?</p>
  
  <p>Here is the code</p>
  
  <p>fix.ts</p>
  
  <pre><code>export interface Fix {
    id: number;
    name: string;
    price: string;
    checked: boolean;
  }
  </code></pre>
  
  <p>fix.service.ts</p>
  
  <pre><code>import { Observable, of } from 'rxjs';
  import { Injectable } from '@angular/core';
  import { Fix } from './fix';
  
  @Injectable()
  export class FixService {
    fixes: Fix[] = [
      {id: 1, name: "Password Reset", price: "39.99", checked: false},
      {id: 2, name: "Spyware Removal", price: "99.99", checked: false},
      {id: 3, name: "RAM Upgrade", price: "129.99", checked: false},
      {id: 4, name: "Software Installation", price: "49.99", checked: false},
      {id: 5, name: "Tune-up", price: "89.99", checked: false},
      {id: 6, name: "Keyboard Cleaning", price: "45.00", checked: false},
      {id: 7, name: "Disk Clean-up", price: "149.99", checked: false},
    ];
  
    constructor() { }
  
    getFix(): Observable&lt;Fix[]&gt; {
      return of(this.fixes);
    }
  }
  </code></pre>
  
  <p>base-layout.component.html</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;mat-card class="services-panel frm-services-panel"&gt;
      &lt;mat-card-header class="frm-services-header"&gt;
        &lt;mat-toolbar class="frm-services-toolbar"&gt;
          Available Services
        &lt;/mat-toolbar&gt;
      &lt;/mat-card-header&gt;
      &lt;mat-card-content class="frm-services-body"&gt;
        &lt;mat-checkbox *ngFor="let fix of fixes" value="{{fix.name}} {{fix.price}}" [(ngModel)]="fix.checked" (change)="getCheckboxes()"&gt;
          &lt;div fxLayout="row"&gt;
            &lt;div class="frm-services-name"&gt;
              {{ fix.name }}
            &lt;/div&gt;
            &lt;div class="rightSide"&gt;
              {{ fix.price }}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/mat-checkbox&gt;
      &lt;/mat-card-content&gt;
      &lt;mat-card-content class="frm-services-inputs"&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Cost of Parts"&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Cost of Labor @$50.00/hr"&gt;
        &lt;/mat-form-field&gt;
        {{ selectedFixes | json }}
      &lt;/mat-card-content&gt;
      &lt;mat-card-actions class="frm-login-actions"&gt;
        &lt;button mat-raised-button class="btn-login button1" (click)="getInvoice()"&gt;Calculate&lt;/button&gt;
      &lt;/mat-card-actions&gt;
    &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>base-layout.component.ts</p>
  
  <pre><code>import { InvoiceSummaryDialogComponent } from './../../pages/invoice-summary-dialog/invoice-summary-dialog.component';
  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { tap, filter, map } from 'rxjs/operators';
  import { Fix } from '../fix';
  import { FixService } from '../fix.service';
  import { Observable, Subscription } from 'rxjs';
  import { MatDialog, MatDialogConfig } from '@angular/material';
  
  @Component({
    selector: 'app-base-layout',
    templateUrl: './base-layout.component.html',
    styleUrls: ['./base-layout.component.scss']
  })
  export class BaseLayoutComponent implements OnInit, OnDestroy {
    fixes: Fix[];
    subs: Subscription[] = []
    selectedFixes: Fix[] = [];
    constructor(private fixService: FixService, private dialog: MatDialog) { }
  
    ngOnInit() {
      const sub = this.fixService.getFix()
        .subscribe(fixes =&gt; {
          this.fixes = fixes;
        });
        this.subs.push(sub);
    }
  
    getCheckboxes() {
      this.selectedFixes = this.fixes
        .filter(f =&gt; f.checked);
          // return this.selectedFixes;
    }
  
    getInvoice() {
      const dialogConfig = new MatDialogConfig();
      dialogConfig.data = {
        selectedFixes: this.selectedFixes
      }
      const dialogRef = this.dialog.open(InvoiceSummaryDialogComponent, dialogConfig);
      dialogRef.afterClosed().subscribe(
        data =&gt; console.log("Dialog output:", data)
      )
    }
  
    ngOnDestroy() {
      for (const sub of this.subs) {
        if(sub) {
          try {
            sub.unsubscribe();
          } catch {}
        }
      }
    }
  }
  </code></pre>
  
  <p>invoice-summary-dialog.component.html</p>
  
  <pre><code>&lt;!-- &lt;div class="container"&gt; --&gt;
  &lt;h2 mat-dialog-title&gt;Invoice&lt;/h2&gt;
  &lt;mat-dialog-content&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let selectedFix of selectedFixes"&gt;
        &lt;div fxLayout="row"&gt;
          &lt;div class="frm-invoice-name"&gt;
            {{ selectedFix.name }}
          &lt;/div&gt;
          &lt;div class="rightSide"&gt;
            {{ selectedFix.price }}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    Total:
  &lt;/mat-dialog-content&gt;
  &lt;mat-dialog-actions&gt;
    &lt;button mat-raised-button class="confirm" (click)="confirm()"&gt;Confirm&lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  &lt;!-- &lt;/div&gt; --&gt;
  </code></pre>
  
  <p>invoice-summary-dialog.component.ts</p>
  
  <pre><code>@Component({
    selector: 'app-invoice-summary-dialog',
    templateUrl: './invoice-summary-dialog.component.html',
    styleUrls: ['./invoice-summary-dialog.component.scss']
  })
  export class InvoiceSummaryDialogComponent implements OnInit {
    @Input() selectedFixes;
    constructor(private dialogRef: MatDialogRef&lt;BaseLayoutComponent&gt;,
            @Inject(MAT_DIALOG_DATA) data) { }
  
    ngOnInit() {
    }
  
    confirm() {
      this.dialogRef.close();
      location.reload();
    }
  }
  </code></pre>