Repository navigation
Host vs HostListener mixup in Documeantation and Neither Seem to Work #3671
Description
I'm confused after trying to set up listeners for a component I'm playing with. I did some digging in the source as there is no documentation yet for the host parameter in the Component annotation and didn't find anything useful, but I did find an instance where documentation has not be updated to fit with changing names. Additionally, I will include my problem as it may be an actual bug rather than a problem with my code.
First the problem with the documentation:
The documentation on angular.io for the DirectiveAnnotation in which they reference a hostListeners argument. This seems to no longer exist and seems to have been replaced with the host argument.
Here's a snip it of that example code:
hostListeners: {
'onmouseenter': 'onMouseEnter()',
'onmouseleave': 'onMouseLeave()'
}
And my problem:
edit: @ericmartinezr has solved this. The fault was as I suspected on my end.
I'm trying to use the host argument not in a DirectiveAnnotation, but in a ComponentAnnotation. Here's a stripped down example of what I'm trying to do:
/// <reference path="../typings/angular2/angular2.d.ts" />
import {Component, View} from 'angular2/angular2';
enum Direction{
up_down,
left_right
}
@Component({
selector: 'draggable',
host: {
'onmousedown': 'dragging_start()'
}
})
@View({
template: `<div>
<p>test</p>
<content></content>
</div>`
})
/ / Component controller
export class Draggable {
dragging: boolean;
constructor() {
this.dragging = false;
}
dragging_start(){
console.log("dragging was enabled");
this.dragging = true
}
}
This renders fine and I would expect to get dragging was enabled printed every time I click. Instead, I am getting a Uncaught ReferenceError: dragging_start is not defined exception every time I press the mouse down.
Activity
ericmartinezr commentedon Aug 16, 2015
See this issue : #3665
So in your case it should be
(^mousedown)and you should change<content>to<ng-content></ng-content>assuming you are using the last alpha version (alpha34) (see #2839)IAPark commentedon Aug 16, 2015
Thanks @ericmartinezr. This is the reason I was so reluctant to create an issue about this, I was pretty sure that whatever issue I was having was my own, but it does seem the documentation will need to be updated at some point to match the current name of the parameter. I'd make a pull request, but based on what you've said there is a good chance other things have also changed with the system that would mean more would need to be changed to make the example functional again. I suspect they probably won't bother until things stabilize a bit more. Again thanks so much for your help.
I'll hold off on closing the issue because there was definitely also an issue with the documentation, but thanks so much. You definitely solved my issue and another issue I wasn't even going to bring up
pkozlowski-opensource commentedon Aug 17, 2015
Solved by 8b655c7
angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.