The proper way to call a function of a parent component in Angular 14

Alex Wright 0
Viewed 53

I want to use events to handle this task. I tried the method explained in this thread but it did not work. I have the following code:

childComponent.ts:

//Getting parent method (Equipments)
@Output() addCompleted = new EventEmitter<string>();
processComplete() {
      this.addCompleted.emit('complete');
}

parentComponent.ts:

onUpdateGrid(e: any){
    alert("Works!")
  }

parentComponent.html:

<ejs-grid #Grid class="data-grid" (addCompleted)="onUpdateGrid($event)" . . .>
    . . . .
</ejs-grid>

The only thing I could not follow from that thread is directives: [ ChildComponent ] in @Component because it is deprecated.

When I run the code, the parent method does not run.

Update: Child component decorator:

@Component({
  selector: 'app-add-equipment',
  templateUrl: './add-equipment.component.html',
  styleUrls: ['./add-equipment.component.scss']
})
angular
1 Answers

I don't know if this matches your use case, but maybe you could use the actionBegin event of ejs-grid.

Here is a quick example:

html:

<ejs-grid ...
(actionBegin)="actionBegin($event)">
...
</ejs-grid>

ts:

actionBegin(args: any) :void {
    let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];
    console.log(args); // this is just to show the result in the console
    if (args.requestType === 'save') {
        if (gridInstance.pageSettings.currentPage !== 1 && gridInstance.editSettings.newRowPosition === 'Top') {
            args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - gridInstance.pageSettings.pageSize;
        } else if (gridInstance.editSettings.newRowPosition === 'Bottom') {
            args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - 1;
        }
    }
}

Sample of console output:

Sample of console output

You can find a full example here: https://stackblitz.com/run?file=app.component.ts,app.component.html (official example) API documentation: https://ej2.syncfusion.com/angular/documentation/grid/editing/in-line-editing/

johey0
Related