Angular 5 EventEmitter Not working well

Question

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.

Answer 1

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