Angular EventEmitter not calling method-CodePudding

I have an eventEmitter that I'm using to show a Child Component and also pass information. I have a parent class that contains uses two components, and , and the parent class will take the value from 's eventemitter and use that as a sign to show and pass in information. Unfortunately, the method to update the boolean is not working in the parent class.

This is the parent component

@Component({
  selector: 'parent',
  template: '
<search-box  (emitter)="(setBoolean($event))"></search-box>
<table-component *ngIf="tableBoolean"></table-component>
',
})
@Injectable({
  providedIn: 'root',
})
export class SearchComponent implements OnInit {
  tableBoolean = false;
  constructor() {
  }

  setBoolean(valueEmitted: any){
    this.tableBoolean = true;
    console.log(this.tableBoolean)
    console.log(valueEmitted)
  }
  ngOnInit(): void {
  }
}

This is the searchbox component

@Component({
  selector: 'search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent implements OnInit {
  @Output() emitter = new EventEmitter<string>();
  constructor(private _renderer2: Renderer2,
    @Inject(DOCUMENT) private _document: Document) {
  }
  emit(){
    this.emitter.emit("TEST");
  }

  ngOnInit(): void {
    let script = this._renderer2.createElement('script');
    script.src = urls.prod;
    this._renderer2.appendChild(this._document.body, script);
  }
}

and table component is just a table, why is my eventEmitter not working? I have that the emit() function runs when I click the button, but the method setBoolean() is not running.

CodePudding user response：

You don't need @Injectable({...}) on the component

Check that EventEmitter is being imported from the correct library (I've made this mistake before

The event template should be written as (emitter)="setBoolean($event)"

CodePudding user response：

Here's The modified code it's as Drenai mentioned


@Component({
  selector: 'parent',
  template: '
<search-box  (emitter)="setBoolean($event)"></search-box>
<table-component *ngIf="tableBoolean"></table-component>
',
})

export class SearchComponent implements OnInit {
  tableBoolean = false;
  constructor() {
  }

  setBoolean(valueEmitted: any){
    this.tableBoolean = true;
    console.log(this.tableBoolean)
    console.log(valueEmitted)
  }
  ngOnInit(): void {
  }
}

and

import { EventEmitter } from '@angular/core';
@Component({
  selector: 'search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent implements OnInit {
  @Output() emitter = new EventEmitter<string>();
  constructor(private _renderer2: Renderer2,
    @Inject(DOCUMENT) private _document: Document) {
  }
  emit(){
    this.emitter.emit("TEST");
  }

  ngOnInit(): void {
    let script = this._renderer2.createElement('script');
    script.src = urls.prod;
    this._renderer2.appendChild(this._document.body, script);
  }
}