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

3

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

answered Nov 21, 2017 at 14:16

Abhishek Singh

9107 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asaf Agranat Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related