Structural directive fails to trigger event emission to parent component

Following up on the question posed here: Emit event from Directive to Parent element: Angular2

It appears that when a structural directive emits an event, the parent component does not receive it.

@Directive({ selector: '[appWidget]' })
export class WidgetDirective implements OnInit{
@Output() wdgInit: EventEmitter<any> = new EventEmitter();
@Input() set appWidget (wdg: any) {
    //display stuff
}
ngOnInit {
   this.wdgInit.emit();
}

widget.component.html:

  <ng-container *ngFor="let wdg of widgets">      
  <div *appTwitterWidget="wdg" >
  <ng-container>

widgetContainer.component.html:

 <app-widget [widgets]="widgetList" (wdgInit)="containerDoSomthing()"></app-widget>

Upon investigation, it seems that containerDoSomthing() is never getting called in this scenario.

Answer №1

Yes, it is indeed a possibility. The current version of Angular 5.2.6 unfortunately does not provide support for @Output binding when used with structural directives in conjunction with the sugared asterisk (*) syntax. This limitation is addressed in a known GitHub issue.

In order to overcome this obstacle, one must convert the syntax into a de-sugarized form, as outlined in the official documentation. The modified code snippet would look like this:

<ng-template [appWidget]="wdg" (wdgInit)="containerDoSomthing($event)"></ng-template>

Answer №2

In my opinion, integrating an EventEmitter into a structural directive is not feasible because the directive typically points to a comment, not an actual DOM element!

This limitation likely causes events to fail to trigger within the DOM from the start. However, attribute directives, which interact with real DOM elements, do not encounter this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for integrating WebRTC recording functionality with a Node.js server

Looking to develop a user-friendly video blogging solution that utilizes WebRTC technology for direct recording of video/audio within the browser, similar to Youtube's My_Webcam. The backend should be powered by Node.js. While exploring various Node. ...

How can I design a versatile button in HTML/CSS3/jQuery/Javascript that utilizes images for borders and corners for maximum scalability?

Is there a way to create a completely scalable button in HTML/CSS3/jQuery+Plugins using images for borders and corners? I have attempted a messy method, but I am confident that there are more effective solutions available. The approach I considered invol ...

Guide: Incorporating TypeScript in Svelte+ page files

I'm finding the svelte-kit documentation confusing. Starting from scratch with an empty project, I am on a mission to learn about Svelte and build a simple application. I want to implement dynamic routes in my project, and for my +page.ts file, I re ...

What is the best way to create documentation for node.js APIs that already exist

Just started learning Node, and feeling overwhelmed by all the different libraries available for the same purpose. It's frustrating to see so many options but not making any progress. I have an existing Node.js + Express application and I am trying t ...

Transform a PHP array into a JavaScript array with UTF-8 encoding

I am currently facing an issue with a products table that contains foreign characters. My goal is to utilize a PHP array in JavaScript to filter a dropdown box as the user types. Everything seems to be working fine except when encountering foreign characte ...

What is the best method for exporting a MapboxGL map?

I am currently utilizing mapboxGL to display maps on a website, and I am interested in exporting the map as an image with the GeoJSON data that has been plotted. I attempted to use the leaflet plugin for this purpose, but it was unable to render clusters ...

Verifying whether an item shows potential for being a successful function

When using protractor.js, I am working with functions that utilize promises/defer. For instance: var myFunc = function(_params) { var deferred = protractor.promise.defer(); /***do some magic code***/ /****wait for other promises****/ /*****deferr ...

Ways to observe redux action flow within a component

I am currently developing a React application structured with the following elements: redux typesafe-actions redux-observable My query is: How can I trigger a UI action when a specific redux action occurs? For instance, if we have these asynchronous ac ...

How to assign attributes to multiple menu items in WordPress without using JavaScript

I'm currently working on adding attributes to each item in my WordPress navbar. Here is what I have at the moment: <ul id="menu-nav-bar" class="menu"> <li><a href="#text">text</a></li> <li><a href="#car ...

Error Message: Angular 5 with SignalR (DefinitelyTyped) - '$' Not Found in Typings

I am currently working on implementing SignalR into my Angular 5 application. To do this, I added the following TypeScript type definitions from DefinitelyTyped: npm install --save @types/jquery npm install --save @types/signalr The version of Typescrip ...

Comparing defaultProps with the logical OR operator

Being relatively new to react, I’ve adopted a method of defining default values which looks like this: class TextInput extends Component { render() { return ( <input type="text" name={ this.pr ...

Vue modifies the array in the data after creating a duplicate of it

Here is the Vue code snippet I'm working with: export default { name: 'Test', data() { return { test1: ['1', '2', '3'], test2: [{ name: 'Hello' }, { name: &apo ...

Fulfill the specified amounts for each row within a collection of items

I have an array of objects containing quantities. Each object includes a key indicating the amount to fill (amountToFill) and another key representing the already filled amount (amountFilled). The goal is to specify a quantity (amount: number = 50;) and au ...

SapUI5: Implementing a toggle functionality to display/hide one list item based on another list item's action

UI5 is a versatile framework with numerous possibilities, but sometimes I find myself struggling to implement ideas that would be easier in traditional HTML. Here's the scenario: I want to create a List with ListItems that display cities like Berlin, ...

Tips for resolving the error message "cannot find module './node'" when compiling with pkg:

After successfully running my Node.js script with 'node main.js', I encountered an error when trying to compile it into an executable using pkg: pkg/prelude/bootstrap.js:1876 throw error; ^ Error: Cannot find module './node' Require s ...

Exploring MongoDB's Aggregation Framework: Finding the Mean

Is there a way to use the Aggregation Framework in MongoDB to calculate the average price for a specific Model within a given date range? Model var PriceSchema = new Schema({ price: { type: Number, required: true }, date: { ...

A guide to displaying a PDF preview using React Dropzone

I am struggling to find a way to display previews of PDF files that I'm uploading using react-dropzone. Although PNG and JPG files are working correctly, I would like to be able to show the user either the actual PDF or an image representation of it. ...

Implementing image caching in tvOS with React-Native: A step-by-step guide

Looking to Implement Image Caching in tvOS using React Native I'm trying to figure out how to cache images that I download from the internet on my Apple TV. I've experimented with various libraries, but none seem to be compatible with tvOS. Any ...

Improving Efficiency in Angular 2 for Managing a High Volume of Items

Imagine a scenario where I have created a component that showcases a list of items. export class ListComponent implements OnInit{ public list:any; constructor(private _ls: ListService) {} ngOnInit() { this._ls.listLoad().subscribe((data ...

Using Checkboxes in React with Material-UI

I am currently facing an issue with my 2 checkboxes. Whenever I select one, both of them get selected automatically. I want the user to be able to choose one, both, or none at all. It's puzzling why they are both getting selected simultaneously. Here ...