How to pass function as data to another module component in angular?

Question

I have a main module with some content and Nav

I have sub modules (lazy loaded) within the main module which should be giving me the nav Items.

I have made a service to pass data:

const navItems = [  
  { text: 'Add', icon: faUser,, function: 'AddDLevels()'},
  { text: 'Create D1', icon: faUser, function: 'toggleCreateD1()'},
  { text: 'Create D2', icon: faUser, function: 'toggleCreateD2()'},
  { text: 'Push DS78', icon: faUser, function: 'pushDS()'}
];
this.consoleNav.setNavItems(navItems);

How do I make the functions work ? I want to click the nav button and it should reflect in child modules component.

I think passing functions is not appropriate. Check the Angular docs about options for component communication: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service I think "Parent and children communicate via a service" would work the best for you given your problem description. — Brian Pfretzschner, Jun 11 '20 at 06:34
@BrianPfretzschner It is communicating via service Parent module and child module — saeedar, Jun 11 '20 at 10:06
@DeepakPookkote I quite didn't get how to use it since all my buttons are dynamic, and I want to manage everything in child level not parent — saeedar, Jun 11 '20 at 10:07

score 2 · Accepted Answer · answered Jun 11 '20 at 06:32

Rather than passing the functions as strings, you should pass a reference to a function, Eg:

const navItems = [  
  { text: 'Add', icon: faUser, function: () => AddDLevels()},
];

Then you just call that function in your on click handler or whatnot

item.function()

How to pass function as data to another module component in angular?

1 Answers1