0

I'm working on a site with a bunch of form elements that are inserted dynamically from a hard-coded list myFormElements:ElementBase. Each element has a string label, and now I need to make these labels clickable to open a new tab (to an external URL). Ideally I'd like to modify ElementBase to make it clickable somehow, is there way to do this? If not what is the best workaround?

<ng-container
  myDynamicField
  [field]="myFormElements[0]"
  [group]="myForm"
  ...
>
</ng-container>

export const myFormElements:ElementBase = [
  {
    id: "some id",
    label: 'some label',
    type: 'text',
    dataType: 'String',
    ...
  },
...
]

export interface ElementBase {
  id: string,
  label?: string,
  type?: string,
  dataType?: string,
  ...
}
Improve this question
7
  • I think something will have to change in myDynamicField to make that work? Commented Oct 21, 2021 at 18:53
  • So you want to convert label element to link? To where should this new tab lead? Commented Oct 21, 2021 at 19:39
  • To an external URL (edited post) Commented Oct 21, 2021 at 19:40
  • Unless I'm missing something, why would you want to change anything in the interface? I'd imagine that you would wrap the label of the html element in on the component level (not sure what [field] is doing with the objects passed). Unless you add in an additional key value pair to represent the url but you would still need to handle the wrapping of the label in an anchor tag and add the href attribute, or handle the click event with an onClick handler. Commented Oct 21, 2021 at 21:11
  • Mostly because the list of myFormElements is very long and lot of components are hard-coded this way, so changing the html would be a lot of work. The url is generated based on the id, so ideally I want to change the template instead of wrapping each label individually Commented Oct 21, 2021 at 21:20
Related questions
10
ng-click doesn't work on dynamic DOM AngularJS?
1
Getting ngClick to work on dynamic fields
2
Fire ng-click on dynamic element
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.