Angular 5 EventEmitter Not working well
Solution 1
You missed one thing @artgb, createProject(event:string){}
You try this.
Solution 2
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):
Add missing imports
Add ngOnInit
- Remove any properties referencing 'Project' model
So I can not find anything wrong with your current code. Your problem might be elsewhere.
Related videos on Youtube
artgb
Updated on June 04, 2022Comments
-
artgb almost 2 years
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. -
artgb over 6 years1. all imports are done , because no import error happen. 2. ngOnInit is available, but not added to the question because not related to eventemit. 3. Here in my question, Project is not related.
-
artgb over 6 yearsThanks for your recommend @Jacobys527, it's working like charm, can you explain me the difference between createProject(event:string) and createProject(event) on angular 5? All have no error on definition.
-
Sameh Awad over 6 yearsSince I actually tried your code snippet, so I have to assume that it is in some other part, that you have not shared. My suggestion would be to try and comment the code inside your ngOnInit functions and try again. Sorry this is the best I can do with the information at hand.
-
Jacobys527 over 6 yearsHI @artgb, some of function definition without type works well, and some of them should have, i do not know the differences of them, but anyway it works. I am glad to hear yourside works well.
-
Sangeeta over 4 yearslittle weird, but this solution worked for me as well. In my case I was able to hit parent function but not able to pass data from through emitter. +1 for the solution.
-
Rahul Sonwanshi almost 4 yearsFor Me it's not working pls help! I have almost the same code but it's just not working