Angular 2/4 access directive data within component

Question

I have a trigger directive:

@Directive({ selector: '[trigger]' }) export class trigger { constructor(private svc: toggleService) {} @HostListener('click') onToggle() { this.svc.toggle(); } }

I also have a target directive:

@Directive({ selector: '[target]' }) export class target { constructor(private svc: toggleService) {} ngOnInit() { this.svc.onToggle.subscribe( (toggleState: boolean) => { this.toggleState = toggleState } } }

They communicate between them via a service. The communication works fine - the target is successfully receiving a boolean state from the trigger.

<component-one> <button trigger></button> </component-one> <component-two> <div target></div> </component-two>

If I console log within the target, I get the correct toggleState. But how do I make the toggleState available within component-two?

You could subscribe to the state inside component-two also, since you do have the service — inubs
– inubs, Commented Nov 21, 2017 at 14:10
I'm building a UI framework and, so I wish to make the directive agnostic. The point is that the directives, used in tandem, will do all the lifting. This way I can avoid having to import the service in the components it is used in. — Asaf Agranat
– Asaf Agranat, Commented Nov 21, 2017 at 14:16
you need to make component-two listen to a subscription of his child... but you don t know who is his child... so the only solution that I found all his child should implement the same interface that containt a method that return a subject.. so the parent can subscribe this this subject and receive the data ... how you going to handle all the children? the anwser is using @ViewChildren — Ricardo
– Ricardo, Commented Nov 21, 2017 at 14:24
So without subscribing in component-two, I have no way of making the target-directive's data available? — Asaf Agranat
– Asaf Agranat, Commented Nov 21, 2017 at 14:41

Abhishek Singh · Accepted Answer · 2017-11-21 14:16:33Z

You will have to use @output in directive like this

@Output() valueChange = new EventEmitter()

and in the function use

(toggleState: boolean) => { this.toggleState = toggleState this.valueChange.emit(toggleState) }

in the button you will have to use

<div trigger (valueChange)="triggerChange($event)"></div>

than you can will get the value in triggerChange function which you can send to the second component using @input property

Or simply you can use service as described in the comments

Thanks Abhishek. I already have an EventEmitter in the service, which is how I communicate between the directives - the target directive subscribes to changes in the service. I wanted to know though if I can make the value from the target directive available in component-two, without subscribing within component-two.

Collectives™ on Stack Overflow

Angular 2/4 access directive data within component

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related