I am facing an issue where I want to send data to all elements named 'modal', but only one of them is receiving the message.
Here is my service:
@Injectable()
export class ModalService {
private _isOpen = new Subject();
isOpen$ = this._isOpen.asObservable();
open(id: string) {
this._isOpen.next({isOpen: true, id: id});
}
close(id: string) {
this._isOpen.next({isOpen: false, id: id});
}
and component:
import {Component, Input} from 'angular2/core';
import {Observable} from 'rxjs/Observable;
import {Subject} from 'rxjs/Subject';
import {ModalService} from './modal.service';
@Component({
selector: 'modal',
template: `
<ng-content></ng-content>`,
styleUrls: ['app/workshop/modal.component.css'],
providers: [ModalService],
})
export class ModalComponent {
@Input() ID;
private show = false;
constructor(private _modal: ModalService){
this._modal.isOpen$.subscribe(
(value) => {
console.log(value)
if(this.ID === value.id) {
this.show = value.isOpen;
}
}
);
}
open() {
this._modal.open(this.ID);
}
close() {
this._modal.close(this.ID);
}
}
Everything works fine until I try to inject the service into another component and send a message to the remaining subscribers. I'm struggling to figure out how to share a message with all elements of type 'modal'. While I can hook DOM elements, I'm having difficulty with Components. Any suggestions on how I can hook all 'modal' elements to observable?
Thank you for your assistance