0

I have a 2 components "Home" and "Permissions". In my Home.html page I created a bootstrap modal with "OK" and "CANCEL" buttons. "OK" need to call the function "deleteRecord()" that belongs to the "Permissions" component.

In this, "Home" is a parent route and "Permissions" is a child route

{
path: 'fis', component: HomeComponent,
children: [
  { path: 'Permissions', component: Permissions},
]
}

Could any one suggest me how to do it.

Manikanta
  • 63
  • 2
  • 12
  • 1
    possible duplicate of https://stackoverflow.com/questions/38974896/call-child-component-method-from-parent-class-angular' – swetansh kumar Feb 20 '18 at 07:13
  • Possible duplicate of [Call child component method from parent class - Angular](https://stackoverflow.com/questions/38974896/call-child-component-method-from-parent-class-angular) – Ramesh Rajendran Feb 20 '18 at 07:15
  • Hi swetansh kumar actually currently i'm using it single component so the way like importing the child component and calling will work but like this i need to use in several coponents i have 10 components each component have a function "deleteRecord()". so it won't work for me – Manikanta Feb 20 '18 at 07:21
  • Did you try creating an interface for your components ? – Safiyya Feb 20 '18 at 07:34
  • no i didn't created interface for the components, could you let me know how to do this in angular2 – Manikanta Feb 20 '18 at 07:36
  • @Manikanta why are using the different component when you can do this thing using a single component itself? make the method in the same component itself and call it – Alok Feb 20 '18 at 08:06
  • i want to make a reusable model popup for delete record. I have a multiple page with list record like users, roles, posts, notification, so created a multiple components for each item. any item in those record can be deleted, so i'm giving a reusable model for delete confirmation. – Manikanta Feb 20 '18 at 08:46

1 Answers1

0

You could try to create a IDeleteRecordComponent

export interface IDeleteRecordComponent{
    deleteRecords();
}

and make your PermissionsComponent (and the other 10 components) implement it. Then, from the HomeComponent, use @ViewChild to access these and call teir methods :

permissions.component.ts

export class PermissionsComponent implements IDeleteRecords{
    deleteRecords(){
       // implement records deletion
    }
}

home.component.ts

export class HomeComponent {
     @ViewChild("permissions") permissionsComponent: IDeleteRecords;

     deleteRecords(){
         this.permissionsComponent.deleteRecords();
     }
}

home.component.html

<button (click)="deleteRecords()">OK</button>
Safiyya
  • 1,383
  • 1
  • 10
  • 16
  • Hi, Here is a one problem deleteRecords(){ this.permissionsComponent.deleteRecords(); } this is for calling the deleteRecords in the permissionsComponent, if i want to call to deleteRecords in the rolesComponent, i need to again use one more line. So i want the code like the deleteRecords function should be in child component itself but when i clicking the OK from the roles page it need to call the deleteRecords in the rolesComponent. like this i'm expecting – Manikanta Feb 20 '18 at 09:22
  • So you want to call deleteRecords functions in all of you child components at the same time? – Safiyya Feb 20 '18 at 09:39
  • no the deleteRecords need to call currently active component. for example i have roles and permissions child. Currently i'm in the roles child, the deleteRecords with in the child need to call – Manikanta Feb 20 '18 at 10:08