angular2 - Trigger event in directive from component

Question

I am trying to trigger an event in a directive used by a component using the EventEmitter.

Component:

@Component({
    selector: 'messages',
    templateUrl: 'static/pages/messages/messages.component.html',
    directives: [AutoScroll],
    events: ['update'],
    providers: [
        HTTP_PROVIDERS,
        RoomService,
    ],
    styleUrls: ['../static/css/messages.component.css', '../static/css/app.component.css']
})

export class MessagesComponent {

    public selectedRoom: Room = <Room>{};

    @Output()
    public update: EventEmitter;

    constructor (private _roomService: RoomService) {
        this.update = new EventEmitter();
    }

    public postMessage (msg) {

        this.update.next({});

        this._roomService.postMessage(msg)
            .subscribe(res => {
                this.selectedRoom.messages.push(res);
            });
    }
}

HTML-template:

<auto-scroll class="chat-messages" (update)="onUpdate($event)">
    <div class="chat-message" *ngFor="#message of selectedRoom.messages">
        <div class="message-content">
            {{ message.text }}
        </div>
    </div>
</auto-scroll>

Directive:

@Directive({
    selector: 'auto-scroll',
    template: '<div></div>'
})
export class AutoScroll {

    constructor (private el: ElementRef) {}

    public onUpdate(event) {
        console.log('Updated');
    }
}

Basically what I want to do is to trigger an event in the auto-scroll directive every time a new message is posted. I have gotten this to work between two components, but not between a component and a directive.

I am quite new at Angular 2, but I hope that you get a clear picture of what I want to achieve!

Mush · Accepted Answer · 2016-04-17 10:03:02Z

5

Just add the Output decorator before your EventEmitter object and you should be good to go:

@Output() update: EventEmitter<any>;

answered Apr 17, 2016 at 10:03

Mush

2,4142 gold badges18 silver badges22 bronze badges

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

2 Comments

Mush Over a year ago

I had on my code: @Output() tabSelected: EventEmitter<any> = new EventEmitter(); But @ValdemarEdvardSandalRolfsen is doing it on the constructor? Does that make a difference?

Günter Zöchbauer Over a year ago

You need to call this.update.emit(someValue); to get the event fired.

kemsky · Accepted Answer · 2016-04-17 13:06:06Z

1

In your specific case EventEmitter does not help since AutoScroll is used inside of MessagesComponent template.

You could implement it like this:

export class MessagesComponent {

    public selectedRoom: Room = <Room>{};

    @ViewChild(AutoScroll)
    public scroller: AutoScroll;

    constructor (private _roomService: RoomService) {

    }

    public postMessage (msg) {

        this._roomService.postMessage(msg)
            .subscribe(res => {
                this.selectedRoom.messages.push(res);
                this.scroller.onUpdate(msg);
            });
    }
}

answered Apr 17, 2016 at 13:06

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

angular2 - Trigger event in directive from component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related