I have been trying to call a function from the Parent Component in the Child Component, and here is how I implemented it:
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>
Upon clicking the New button in the child component, I noticed that only "submit" is displayed in the console, but not
"create Project on parent component"This indicates that the event is not being emitted or received by the parent component. It seems like there might be something missing in my implementation.
I would greatly appreciate any insights or suggestions you can provide.