1

long story short, i have custom dialog component that takes three inputs to display data. example showing here only use a static component and injected to parent component. i wonder if there is away i can pass inputs to component other than the traditional way. my whole point is, i do not want to create 10 components has the same structure, other than create one component that takes inputs with different values

here is the component i was talking about :

import { Model } from '../models/modal';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
export interface ImgTypes{
bar?:string;
dot?:string;
line?:string;
}
export interface Images{
linear?: ImgTypes;
ridge?: ImgTypes;
ridgeCv?: ImgTypes;
lasso?: ImgTypes;
lassoCv?: ImgTypes;
}

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
})
export class DialogComponent {
  images: Images;
  calculatedModal;
  variables;
  constructor(public dialogRef: MdDialogRef<DialogComponent>) {
  }
}
@Component({
  selector: 'app-view-modal',
  templateUrl: './view-modal.component.html',
  styleUrls: ['./view-modal.component.css']
})
export class ViewModalComponent implements OnInit {
  @Input() calculatedModal;
  @Input() options;
  @Input() images: Images;
  dialogRef: MdDialogRef<DialogComponent>;

  model: Model = {
    AdmitSource: 0, AdmitUnit: 0, DischargeDisposition: 0, icuOrder: 0, PrimaryInsurance: 0,
    age: 0, generalCareOrder: 0, stepdownOrder: 0, isoResult: 0
  };
  variables = [
    'Admit_Source',
    'Primary_Insurance',
    'Discharge_Disposition',
    'Admit_Unit',
    'Bed_Category',
    'iso_result',
    'icu_order',
    'stepdown_order',
    'age'];
  ngOnInit() {
  }

  constructor(public dialog: MdDialog, public viewContainerRef: ViewContainerRef) {

  }

  openDialog() {
    let config = new MdDialogConfig();
    config.viewContainerRef = this.viewContainerRef;
    if (this.calculatedModal && this.images) {
      this.dialogRef = this.dialog.open(DialogComponent, config);
      this.dialogRef.componentInstance.images = this.images ;
      this.dialogRef.componentInstance.calculatedModal = this.calculatedModal ;
      this.dialogRef.componentInstance.variables = this.variables;
      this.dialogRef.afterClosed().subscribe(result => {
        this.dialogRef = null;
      });
    }

  }

};
FAISAL
  • 33,618
  • 10
  • 97
  • 105
Kero
  • 1,924
  • 5
  • 33
  • 53
  • 1
    See step8 from http://stackoverflow.com/questions/34205593/working-example-of-angular-2-0-material-mddialog-with-angular-2-0/40185852#40185852 – yurzui Mar 26 '17 at 16:07
  • @yurzui i have a problem with i way you show me. for example i am passing a deep nested object as following : `this.dialogRef.componentInstance.calculatedModal = this.calculatedModal;` while calculateModal is passed to parent component, however, i am getting this error `Cannot read property 'linear' of undefined`. is there any special way to pass deep nested object., thank you – Kero Mar 26 '17 at 18:43
  • Try to use save navigation operator `?.` – yurzui Mar 26 '17 at 18:52
  • @yurzui i did and i got this error `Failed to load resource: the server responded with a status of 404 (Not Found)` – Kero Mar 26 '17 at 19:23
  • @yurzui look at my code above – Kero Mar 26 '17 at 19:30
  • Create plunker that demonstrates the issue – yurzui Mar 26 '17 at 19:34
  • @yurzui here it is https://plnkr.co/edit/NKSK9kgmJa2kTnpqNijm?p=preview – Kero Mar 26 '17 at 20:30
  • 1
    You have wrong `[src]` bindings It should be like `[src]="'assets/newimage/' +images['ridge'].bar"` https://plnkr.co/edit/Now0CVZeMxK8YkFhObKo?p=preview – yurzui Mar 26 '17 at 20:41
  • @yurzui you are absolutely right thank you – Kero Mar 26 '17 at 21:00

0 Answers0