logo
down
shadow

Angular eventemitter not working when emitting the event from directive


Angular eventemitter not working when emitting the event from directive

Content Index :

Angular eventemitter not working when emitting the event from directive
Tag : javascript , By : Keonne Rodriguez
Date : November 29 2020, 12:01 PM

wish helps you appcomp.html , I think you most call callEmit on child component
childcomp.html
<a href='' [mydirective]="val" (callEmit)="childFunc($event)"> </a>
@Output() callEmit = new EventEmitter();

childFunc(){
this.callEmit.emit();
}
`<app-child (callemit) = parentFunc($event)> </app-child>`
 parentFunc(event){
    console.log(event)
  }

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Angular directive event binding not working


Tag : javascript , By : Andrew Mattie
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


Tag : javascript , By : Robby
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


Tag : javascript , By : Luciano Campos
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)


Tag : javascript , By : Mahesh
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>
Related Posts Related QUESTIONS :
  • Idle event on mouse move - how to stop script permanently on mouse move
  • Why do I get logic is not defined in this code
  • When I enter a number in the input, the first function starts
  • ES6 imports and node_modules hell
  • How to get css selector of clicked-on element?
  • How to auto input MySQL data (input column 1 data to auto input column 2 data with same column) in php?
  • Appending to Datalist Via Javascript
  • Customizing Material-UI Components with Styled-Components
  • Populate elements with class name using Javascript
  • How to execute promises in batches (first resolving 10, then next 10 and so on)
  • Maximo JS automation script: "importPackage" is not defined
  • How to surround selected text inside textarea with <em> on key combination CTRL+i?
  • Your configured registry does not support audit requests ~ On npm audit
  • What's the Angular equivalent of Vue <slot/>?
  • Iconify icon not updating when "data-icon" set with setAttribute()
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com