0

I am following this excellent article to create dynamic components in angular and it works properly. Its passing an array of elements to be rendered dynamically in below format.

config.push(
      {
       type: 'select',
        label: 'Month',
        name: 'month',
        options: this.monthList,
        (change)= selectDayList,
        (focus)= selectMonth,
        placeholder: 'Select an option',
        validation: [Validators.required],
        value = -1
      },
      {
        type: 'select',
        label: 'Day',
        name: 'day',
        options: this.dayList,
        placeholder: 'Select an option',
        validation: [Validators.required]
      });

I want to bind dynamic events(like change and focus) passed in array and emit the same with same function-name as passed in array. I am not sure if its feasible or not, as I am new in Angular so want some advice, TIA.

Please suggest some article if available.

Edit: Here dynamic events means it can be any event passed in array, just it need to be present in component's event list. Like change event passed in array's first element so if component has a event called change then it should bind it and emit.

I want to create some kind of generic wrapper, where any dynamic event can perform any action which depends on code present in emitted function only.

Note: For ex. in first dropdown we have passed (change)= selectDayList so it should bind change event and emit selectDayList function

Sunil Chaudhary
  • 397
  • 1
  • 9
  • 31
  • What do you mean `dynamic events`? that you can change the invoked function based on conditions? – YaakovHatam Aug 02 '20 at 12:25
  • dynamic events means it can be any event passed in array, just it need to be present in component's event list.. like change event passed in array's first element so if component has a event called change then it should bind it and emit..hope I make you understand. – Sunil Chaudhary Aug 02 '20 at 12:28
  • What's about `(change)= () => { this.selectDayList.forEach(f => f() },` ? when `selectDayList` is your functions array. for ex: `this.selectDayList = [ () => alert(1), () => alert(2)]` – YaakovHatam Aug 02 '20 at 12:30
  • actually I want to create some kind of generic wrapper, where any dynamic event can perform any action which depends on code present in emitted function only.. – Sunil Chaudhary Aug 02 '20 at 12:35
  • Tried to help but your goal is unclear. – YaakovHatam Aug 02 '20 at 12:37
  • sry if it still unclear and thanks for replies. I want to bind events passed for the component if and only if that event actually exist for that component. Also need to emit the function passed for the event. For ex. in first dropdown we have passed (change)= selectDayList so it should bind change event and emit selectDayList function. – Sunil Chaudhary Aug 02 '20 at 12:42
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219089/discussion-between-sunil-chaudhary-and-yaakovhatam). – Sunil Chaudhary Aug 02 '20 at 12:46

0 Answers0