CODEWITHSUNDEEP
angularangular8
memyselfandi
memyselfandi

Reputation: 71

EventEmitter - Can't bind since it isn't a known property - Angular 8

I'm trying to use eventemitter but I am not being able to use it. I'm pretty new to angular and I don't understand what's going on! for what I've seen in other posts I'm doing everything right! I am trying to send an array through a component to another. The interventionpage will be the one responsible and owner of this array, so whenever occurs a change in this array I want to export the data to the sync page. Can somebody tell me what am I doing wrong?

I am getting this error: 

*Uncaught Error: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 9 in [message=$event] in ng:///SyncPageModule/SyncPage.html@40:37 ("

  <ion-card>
      <app-intervention [eventTest]="[ERROR ->]message=$event"></app-intervention>
    <ion-item-divider>
        Acciones Pendientes ({{message}})
"): ng:///SyncPageModule/SyncPage.html@40:37
Can't bind to 'eventTest' since it isn't a known property of 'app-intervention'.*

Here's my code:

InterventionPage.ts 

import { EventEmitter } from 'events';

@Component({
  selector: 'app-intervention',
  templateUrl: './intervention.page.html',
  styleUrls: ['./intervention.page.scss'],
})
export class InterventionPage implements OnInit {

  constructor(private router: Router,
    public alertController: AlertController) { }

  service: any;
  initialDate: string;
  endDate: string;
  initialTime: string;
  endTime: string;
  startingTime: string;
  teste_array: any = [];
  interventions: any = ["test", "teste", "testee"];
  @Output() public eventTest = new EventEmitter();

  sendsData() {
    this.interventions.push("testThroughClick");
    this.eventTest.emit(this.interventions.length);

    console.log("interventions length: ")
    console.log(this.interventions.length);
  }

SyncPage.ts

import { InterventionPage } from '../intervention/intervention.page';


@Component({
  selector: 'app-sync',
  templateUrl: './sync.page.html',
  styleUrls: ['./sync.page.scss'],
})
export class SyncPage implements OnInit {

  services: any = [];
  teste: string;
  teste_array: any = [];
  nr: any;
  public message = "";


  constructor(private interventionsPage: InterventionPage) {
     }

}

SyncPage.HTML

<ion-card>
      <app-intervention [eventTest]="message=$event"></app-intervention>
    <ion-item-divider>
        Acciones Pendientes ({{message}})
    </ion-item-divider>
</ion-card>

Upvotes: 1

Views: 502

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Change

import { EventEmitter } from 'events';

to

import { EventEmitter } from '@angular/core';

and,

<app-intervention (eventTest)="message=$event"></app-intervention>

Upvotes: 4

Related Questions