CODEWITHSUNDEEP
angulartypescriptcomponentseventemitter
artgb
artgb

Reputation: 3233

Angular 5 EventEmitter Not working well

I am trying to call Parent Component function on Child Component, and implemented like this.

project-form.component.ts

@Component({
  selector: 'app-project-form',
  templateUrl: './project-form.component.html',
  styleUrls: ['./project-form.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ProjectFormComponent implements OnInit {

  @Input() project: Project;
  @Output() createProject = new EventEmitter<string>();

  newProject() { 
    console.log("submit");
    this.createProject.emit('submit');
   }
}

project-form.component.html

<button (click)="newProject()" class = "btn-success" >New</button>

project-view.component.ts

export class ProjectViewComponent implements OnInit {

  projects: Project[];
  projectform: Project;

  createProject(event){
    console.log("create Project on parent component");
  }
}

project-view.component.html

<app-project-form [project]="projectform" (createProject)="createProject($event)"></app-project-form>

Here when I click on New button of child component, I can only see "submit" on console but not "create Project on parent component".

It means event is not emitted or parent not received event. Basically, I missed something.
Please share any kind of hit for me.

Upvotes: 3

Views: 13692

Answers (2)

Sameh Awad
Sameh Awad

Reputation: 324

Actually I tried your code, and it is working fine on Angular 5.0.0. I get two console messages when I click on New ('submit' and ' create Project ...'). I think your problem might not be directly related to the EventEmitter. The code snippets you have provided compile and run directly with the following amendements (if you want to test it):

  1. Add missing imports

  2. Add ngOnInit

  3. Remove any properties referencing 'Project' model

So I can not find anything wrong with your current code. Your problem might be elsewhere.

Upvotes: 1

Jacobys527
Jacobys527

Reputation: 254

You missed one thing @artgb, createProject(event:string){} You try this.

Upvotes: 3

Related Questions