How to pass array between a master and detail component in Angular2 without directive?

Question

I would use How to do inter communication between a master and detail component in Angular2? to solve this problem but it's not allowed now to use directive. How to pass my array from first component to another?

import { Component} from '@angular/core';
import { Router } from '@angular/router';

import { MdDialog, MdDialogRef } from '@angular/material';


@Component({
  selector: 'app-flashcards',
  templateUrl: './flashcards.component.html',
  styleUrls: ['./flashcards.component.scss'],

})
export class FlashcardsComponent {
  dialogRef: MdDialogRef<MnemoDialog>;

  constructor (private router: Router,public dialog: MdDialog) {} //router in function

  mnemo = ['assets/images/family.png', 'assets/images/blood-m.png','assets/images/obrazek.jpg','assets/images/asdfas.jpg'];
  n = 0;

  myMnemo = this.mnemo[this.n];

  nextImg() {

      this.myMnemo = this.mnemo[this.n];
      n++;

    }
  }

}


@Component({
  selector: 'mnemo-dialog',
  template: `<img fxFlex="70%"  md-card-image src="{{ myMnemo }}">`
})
export class MnemoDialog {

}

i don't know, what you wanna do, pls describe a bit more detail — Tiep Phan, Feb 12 '17 at 08:48
I need to have this data "assets/images/family.png" from first component, in second component using interpolation (myMnemo) — Tomasz Cysewski, Feb 12 '17 at 08:56
2nd component has `@Input() myMnemo`, 1st component has `@Ouput()` public an event when nextImg call, for example. or using service, public event by using `Subject` — Tiep Phan, Feb 12 '17 at 09:02
maybe I will do something like global array for all components? Is that possible? — Tomasz Cysewski, Feb 12 '17 at 10:35
I will do this http://stackoverflow.com/questions/36158848/what-is-the-best-way-to-declare-a-global-variable-in-angular-2-typescript?noredirect=1&lq=1 and I will see what happens thanks — Tomasz Cysewski, Feb 12 '17 at 10:37

score 0 · Answer 1 · answered Feb 12 '17 at 09:10

0

@Component({
  selector: 'mnemo-dialog',
  template: `<img fxFlex="70%"  md-card-image src="{{ source }}">`
})
export class MnemoDialog {
    @Input()source: YOURDATATYPE;
}

And in your flashcards.component.html something like this:

 <mnemo-dialog [source]="myMnemo"></mnemo-dialog>

Or is this not allowed?

answered Feb 12 '17 at 09:10

Batajus

5,831
3
25
38

nah, not working, I dont use mnemodialog like this , I call fuction inside flashcards for this component open() { this.dialogRef = this.dialog.open(MnemoDialog); } – Tomasz Cysewski Feb 12 '17 at 10:27

How to pass array between a master and detail component in Angular2 without directive?

1 Answers1