Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Showing" Property 'emit' does not exist on type '() => void' "alouugh I included EventEmitter class

I am making a basic angular js web page and facing an issue regarding the emit function

Here’s app.component.ts

import { Component } from '@angular/core';
import { WishItem } from '../shared/models/wishItem';

const filters =
  [
    (item: WishItem) => item,
    (item: WishItem) => !item.isComplete,
    (item: WishItem) => item.isComplete
  ]

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {

  //items is an array
  items: WishItem[] = [
    new WishItem('To Learn Angular'),
    new WishItem('Get Coffee', true),
    new WishItem('Find grass that cuts itself')


  ];
  listFilter: any  = '0';

  //fromWishItem.ts

  title = 'wishlist';

  //copying items array
  get visibleItems(): WishItem[] {

    return this.items.filter(filters[this.listFilter])

//changing dynamically
  }

}

Here’s my child component add-wish-form.componenet.ts

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

import { Component, OnInit ,Output,EventEmitter} from '@angular/core';

import { WishItem } from '../../shared/models/wishItem';

@Component({
  selector: 'add-wish-form',
  templateUrl: './add-wish-form.component.html',
  styleUrl: './add-wish-form.component.css'
})
export class AddWishFormComponent implements OnInit
{
  
@Output() addWish = new EventEmitter<WishItem>();
/** EventEmitter facilitates communication between the child and parent components
 * 
 */

constructor(){ }
  ngOnInit(): void {
      
  }


  newWishText = '';

  addNewWish()//add wish to the items array above & clear textbox
  {
    //adding new wish item in our array
    

    this.addNewWish.emit(new WishItem(this.newWishText))
    this.newWishText = '';

  }

}

I’m using Angular CLI: 17.0.3
Node: 21.2.0

I was following a tutorial video from yt where it seems working but in my laptop it’s not working.
Anyone can tell me a solution to this issue?

>Solution :

You have a typo, its referring to the source function instead of the event emitter!

Before:

this.addNewWish.emit(new WishItem(this.newWishText))

After:

this.addWish.emit(new WishItem(this.newWishText))
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading