Angular directive event binding not working
Date : March 29 2020, 07:55 AM
it helps some times Actually, you could do the DOM transform in 'compile' function. Try to implement like this: directive('rcpRadio', [ function( ) {
return {
restrict: 'E',
compile: function(element,attr){
//transform DOM according to attribute
var label, elementHTML, selection, selectionName;
if (typeof(attr) != "undefined" && typeof(attr.label) != "undefined") {
label = attr.label;
} else {
label = "";
}
if (typeof(attr) != "undefined" && typeof(attr.selection) != "undefined") {
selection = attr.selection;
} else {
selection = "";
}
if (typeof(attr) != "undefined" && typeof(attr.selectionName) != "undefined") {
selectionName = attr.selectionName;
} else {
selectionName = "";
}
if (typeof(attr) != "undefined" && typeof(attr.isChecked) != "undefined" && attr.isChecked == "true") {
elementHTML = "<div class='switch radius nyes'><input type='radio' value='" + selection + "' name='" + selectionName + "' id='" + selectionName + "_id' checked ><label for='" + selectionName + "'></label><span> " + label + " </span></div>";
} else {
elementHTML = "<div class='switch radius nyes'><input type='radio' value='" + selection + "' name='" + selectionName + "' id='" + selectionName + "_id' ><label for='" + selectionName + "'></label><span> " + label + " </span></div>";
}
element.replaceWith(elementHTML);
//return link function
return function(scope,element,attr){
element.on('click', function(event) {
//element.bind('click', function (event) {
alert(":CLICK:");
console.log("## CLICK! :");
console.log(event);
});
element.bind('mouseover', function() {
console.log("## HOVER! :");
console.log(event);
});
};
}
}
}]);
|
Emitting event from structural directive to parent component does not work
Date : March 29 2020, 07:55 AM
hope this fix your issue It's possible. The issue is that current Angular 5.2.6 still doesn't support @Output binding for structural directives if used with the sugared asterisk (*) syntax (see GitHub issue) like in the question. To make it work you have to transform it to de-sugarized form ( see here) like this: <ng-template [appWidget]="wdg" (wdgInit)="containerDoSomthing($event)"></ng-template>
|
EventEmitter not emitting value back to form
Date : March 29 2020, 07:55 AM
I wish this help you I don't see anything listening for that EventEmitter.
You want something like (dateChange)="onDateChange($event.value)" Where onDateChange($event.value) is a method in the parent componenet which accepts the new value.
|
Angular directive emitting output, parent not updated
Tag : jquery , By : Anthony Eden
Date : March 29 2020, 07:55 AM
Hope this helps Angular isn't aware of the changes being made via the Observable.fromEvent subscription, as this is not happening within a zone. You can use NgZone to run code within a zone. e.g.: import { NgZone } from '@angular/core';
// ...
constructor(el: ElementRef, ngZone: NgZone) {
this.collapseStatus = new EventEmitter();
Observable
.fromEvent($(el.nativeElement), 'hide.bs.collapse show.bs.collapse')
.subscribe(e => {
ngZone.run(() => this.collapseStatus.emit(e));
});
}
|
Angular 6 event.stopPropagation() not working in directive (template-driven form takes event.data already)
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , You should replace your input handler by a keydown handler. Then if the key is good, do nothing, otherwise, prevent the event from happening. The problem is that if you listen to the input event, it will be too late, the ngModel will have been updated, so you have to listen to the keydown event and filter it appropriately. @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
if (this.specialKeys.indexOf(e.key) !== -1 || new RegExp(/[0-9]/g).test(e.key)) {
return;
}
e.preventDefault();
}
<div class = "form-group">
<label class = "form-control-label label-color" for = "citizenNumber">Citizen Number
</label>
<input type = "text"
class = "form-control input-css"
name = "citizenNumber"
id = "citizenNumber"
#citizenNumber="ngModel"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"
[(ngModel)] = "value"
[placeholder] = "placeholder"
minlength = "11"
maxlength = "11"
[required] = "required">
<div *ngIf = "citizenNumber.invalid && (citizenNumber.dirty || citizenNumber.touched)"
class = "form-text text-danger">
<small *ngIf = "citizenNumber.errors.required">This field is required.</small>
<small *ngIf = "citizenNumber.errors.minlength">This field must be 11 characters.</small>
<small *ngIf = "citizenNumber.errors.invalidTc">This is not a citizen number</small>
</div>
</div>
|
Boards Message :
Related QUESTIONS :