EventEmitter does not properly capturing the event

Question

EventEmitter does not properly capturing the event

I have been attempting to make my toolbar component send data to another component (dat.gui -> three.js). I thought creating an output emitter would be necessary, and while it is set up, it doesn't seem to be functioning properly. These components do not contain any actual HTML code.

All I want to do is emit the event with the interface containing data (currently just a boolean, but will expand in the future). My project is available on GitHub if that would help clarify things. I have been researching different ways to work with Angular, but as a beginner, I may have made a mistake. If so, please point it out as I am unsure of what I am doing wrong.

https://github.com/GrimZero/ConfiguratorAngular

settngs.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SettingsService {

  $dataChange: Subject<any> = new Subject<any>();
}

toolbar.component.ts

import { GUI } from './../../../node_modules/three/examples/jsm/libs/dat.gui.module';
import { Settings } from '../settings';
import { SettingsService } from '../settings.service';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['../app.component.css']

})
export class ToolbarComponent implements OnInit {
  settingsData: Settings;

  constructor(private service: SettingsService) {
    this.settingsData = this.defineSettings({ TimeNight: false });
  }

  defineSettings(config: Settings) {
    const settings = { TimeNight: true };

    if (config.TimeNight) {
      settings.TimeNight = config.TimeNight;
    }

    return settings;
  }

  onChange() {
    this.service.$dataChange.next(this.settingsData);
    console.log('emitted');
  }

  ngOnInit() {
    const gui = new GUI();
    gui.add(this.settingsData, 'TimeNight').onChange(() => {
      this.onChange();
    });
  }
}

threejs.component.ts

import { Component, OnInit } from '@angular/core';
import { Material } from '../material.js';
import { TimeOfDay } from '../time-of-day.js';
import { Threejscontroller } from '../threejscontroller.js';
import { SettingsService } from '../settings.service.js';


@Component({
  selector: 'app-threejs',
  templateUrl: './threejs.component.html',
  styleUrls: ['../app.component.css']
})
export class ThreejsComponent implements OnInit {
  threejs: Threejscontroller;

  constructor(private service: SettingsService) { }

  updateWebGL = (settingsData: any) => {
    console.log('recieved message');

    if (!settingsData.TimeNight) {
      new TimeOfDay().SetTimeDay(this.threejs.scene);
    } else {
      new TimeOfDay().SetTimeDusk(this.threejs.scene);
    }
  }

  ngOnInit() {
    this.service.$dataChange.subscribe((value: any) => {
      console.log(value);
      // this.updateWebGL(value);
    });

    this.threejs = new Threejscontroller();
    this.threejs.update();
  }
}

angular typescript dat.gui

Answer 1

Answer №1

To transfer data from a child component to a parent component, the use of @Output is necessary. It seems like there might be an issue with your current approach.

In order to achieve this, consider implementing a service:

Create a service as shown below:

@Injectable()
export class MyService {
    $dataChange: Subject<any> = new Subject<any>();
}

Make sure to include it in your app.module.ts

@NgModule({    
    providers: [
        MyService
    ]
})

Inject this service into ThreejsComponent and utilize it as illustrated below:

export class ThreejsComponent implements OnInit {
  threejs: Threejscontroller;

  constructor(private myService: MyService) { }

  UpdateWebGL = (settingsData: Settings) => {
    console.log('message received');

    if (!settingsData.TimeNight) {
      new TimeOfDay().SetTimeDay(this.threejs.scene);
    } else {
      new TimeOfDay().SetTimeDusk(this.threejs.scene);
    }
  }

  ngOnInit() {
    this.threejs = new Threejscontroller();
    this.threejs.update();

    this.myService.$dataChange.subscribe((value: any) => {
            this.UpdateWebGL(value);
        });
  }
}

In ToolbarComponent, implement it in the following way:

export class ToolbarComponent implements OnInit {
  settingsData: Settings;

  @Output() event: EventEmitter<Settings> = new EventEmitter<Settings>();

  constructor(private myService: MyService) {
    this.settingsData = this.defineSettings({ TimeNight: false });
  }

  defineSettings(config: Settings) {
    const settings = { TimeNight: true };

    if (config.TimeNight) {
      settings.TimeNight = config.TimeNight;
    }

    return settings;
  }

  onChange() {
    this.myService.$dataChange.next(this.settingsData);
    console.log("emitted");

  }

  ngOnInit() {
    const gui = new GUI();
    gui.add(this.settingsData, 'TimeNight').onChange(() => {
      this.onChange();
    });
  }
}

After reviewing your git code, I noticed an issue with your imports. Please modify the import statement for ThreejsComponent as follows:

import { SettingsService } from '../settings.service';

I hope this information proves helpful!

Answer 2

To transfer data from a child component to a parent component, the use of @Output is necessary. It seems like there might be an issue with your current approach.

In order to achieve this, consider implementing a service:

Create a service as shown below:

@Injectable()
export class MyService {
    $dataChange: Subject<any> = new Subject<any>();
}

Make sure to include it in your app.module.ts

@NgModule({    
    providers: [
        MyService
    ]
})

Inject this service into ThreejsComponent and utilize it as illustrated below:

export class ThreejsComponent implements OnInit {
  threejs: Threejscontroller;

  constructor(private myService: MyService) { }

  UpdateWebGL = (settingsData: Settings) => {
    console.log('message received');

    if (!settingsData.TimeNight) {
      new TimeOfDay().SetTimeDay(this.threejs.scene);
    } else {
      new TimeOfDay().SetTimeDusk(this.threejs.scene);
    }
  }

  ngOnInit() {
    this.threejs = new Threejscontroller();
    this.threejs.update();

    this.myService.$dataChange.subscribe((value: any) => {
            this.UpdateWebGL(value);
        });
  }
}

In ToolbarComponent, implement it in the following way:

export class ToolbarComponent implements OnInit {
  settingsData: Settings;

  @Output() event: EventEmitter<Settings> = new EventEmitter<Settings>();

  constructor(private myService: MyService) {
    this.settingsData = this.defineSettings({ TimeNight: false });
  }

  defineSettings(config: Settings) {
    const settings = { TimeNight: true };

    if (config.TimeNight) {
      settings.TimeNight = config.TimeNight;
    }

    return settings;
  }

  onChange() {
    this.myService.$dataChange.next(this.settingsData);
    console.log("emitted");

  }

  ngOnInit() {
    const gui = new GUI();
    gui.add(this.settingsData, 'TimeNight').onChange(() => {
      this.onChange();
    });
  }
}

After reviewing your git code, I noticed an issue with your imports. Please modify the import statement for ThreejsComponent as follows:

import { SettingsService } from '../settings.service';

I hope this information proves helpful!

Answer 3

Answer №2

It seems like there is a mistake in how you're declaring your event:

export class ToolbarComponent implements OnInit {
  settingsData: Settings;

  @Output() change: EventEmitter<Settings> = new EventEmitter<Settings>();


  onClick(){
    this.change.emit(this.settingsData);
  }

Additionally, make sure to handle the (change) event in your app-threejs component:

<app-threejs (change)="hello($event)"></app-threejs>


export class ThreejsComponent implements OnInit {
    hello(event:any) {
        console.log(event);
    }
}

Answer 4

It seems like there is a mistake in how you're declaring your event:

export class ToolbarComponent implements OnInit {
  settingsData: Settings;

  @Output() change: EventEmitter<Settings> = new EventEmitter<Settings>();


  onClick(){
    this.change.emit(this.settingsData);
  }

Additionally, make sure to handle the (change) event in your app-threejs component:

<app-threejs (change)="hello($event)"></app-threejs>


export class ThreejsComponent implements OnInit {
    hello(event:any) {
        console.log(event);
    }
}

Answer 5

Answer №3

Initially, Output sends an event from child to parent component. However, in the given code, there is no parent-child relationship established (consider using services). To handle events between parent and child components, make the following adjustments:

In app.component.html, only include the threejs component.

<app-threejs (event)='UpdateWebGL($event)'></app-threejs>

Include a toolbar in threejs.component.html as follows:

<app-toolbar></app-toolbar> <!-- This is where the emit function will look for the parent component -->

Answer 6

Initially, Output sends an event from child to parent component. However, in the given code, there is no parent-child relationship established (consider using services). To handle events between parent and child components, make the following adjustments:

In app.component.html, only include the threejs component.

<app-threejs (event)='UpdateWebGL($event)'></app-threejs>

Include a toolbar in threejs.component.html as follows:

<app-toolbar></app-toolbar> <!-- This is where the emit function will look for the parent component -->

EventEmitter does not properly capturing the event

Answer №1

Answer №2

Answer №3

Similar questions

Please upload a collection of chosen files

Tips for resolving the error message "termsOfUse must be a boolean type, but the final value was: 'on'," using a combination of Ionic, React, Yup, and Resolvers

Tips for sending information back to the previous screen in React Native Navigation version 5

Encountering difficulties upgrading to Angular 8 as the necessary command cannot be located

Validating forms in Angular 6 upon submission

Mapping fields in Angular collectively

Eliminate unnecessary spacing from the sticky container

Exploring function overloading in Typescript using custom types

Utilizing a compiled Electron application built with Angular and ready to launch

Exploring Real-Time Typescript Validation in Next.JS

What could be causing the malfunction of getter/setter in a Vue TypeScript class component?

What is the recommended TypeScript type for the NextJS _app.tsx Component and pageProps?

Adding a new key to a specific position in an array using Angular

Textbox within ng-for directive will be displayed only if there is data available

How can a particular route parameter in Vue3 with Typescript be used to retrieve an array of strings?

Util Deprecations resolved with TSLint Autofix

Encountering challenges when trying to incorporate error-handling functionality into Highcharts

Is there a way to define type information for a global variable when utilizing dynamic import within a function?

Using a custom validator in Angular that accepts an array as input

Ways to secure mat tab for verification