0

In the homeComponent.ts am displaying some data from the database. In each of this displayed items, I provide a button for the openDailog().

What I want to do now is get the data value of the clicked item in the material2 dialog.

Here is my homeComponent

@Component({
  selector: 'app-homecomponent',
  template: `
      <app-homecard
        *ngFor="let item of items"
        [item]="item"
        (checked)="onItemChecked($event)"
           >
       </app-homecard>
  `
})
export class HomeComponent implements OnInit {
ngOnInit() {
   this.statusService.getStatus()
    .subscribe(items => { this.items = items;});
  }

}

And here is the homecard where the Dialog is implemented from.

  @Component({
      selector: 'app-homecard',
      template: `
         <md-card>
            <button md-button (click)="openDialog()"><i class="fa fa-share-alt-square fa-1x" aria-hidden="true"></i></button> 
        </md-card>
      `
    })
    export class HomeCard implements OnInit {
    @Input() item = {};
    @Output() checked = new EventEmitter();
      constructor(
        private _dialog: MdDialog
        ) { }

    openDialog() {
        let dialogRef = this._dialog.open(DialogShare);
      }
    }

//Dialog component!
    @Component({
      template: `
        <app-sharecard></app-sharecard>
      `,
    })
    export class DialogShare {
      constructor(@Optional() public dialogRef: MdDialogRef<DialogShare>) { }
    }

Here is the sharecard where I want to get the item values like {{item.id}}

@Component({
  selector: 'app-sharecard',
  template: `
  <div  class="shareform">
    {{item.id}}
    {{item.name}}
  </div>
  `
})
export class ShareCard implements OnInit {
  ngOnInit() {

  }
  close() {
      this._dialog.closeAll();
  }
}

How can I get opened item data in sharecard?

LearnToday
  • 2,762
  • 9
  • 38
  • 67

1 Answers1

3

Firstly add item input to your ShareCard component

export class ShareCard implements OnInit {
  @Input() item: any;
}

then modify DialogShare like:

@Component({
  template: `<app-sharecard [item]="item"></app-sharecard>`
})
export class DialogShare {
  item: any;
  ...
}

and finally pass item when you're opening dialog:

export class HomeCard {
  ...
  openDialog() {
    let dialogRef = this._dialog.open(DialogShare);
    dialogRef.componentInstance.item = this.item;
  }
}

Take a look at Plunker Example

See also

Community
  • 1
  • 1
yurzui
  • 205,937
  • 32
  • 433
  • 399