Dynamically interpolating string with specific object

Question

I have a component where I have a list of objects and I want to pass in a single input parameter that describes the route that should be navigated to when any specific row is clicked.

Something like the below:

    //Some sort of object may have an 'id' field in some cases (but not in other cases... if it didn't I would pass in a different string below)
    @Input()
    listData: any[]; 
    @Input()
    link: string; // Input of something like "/List/Detail/${row.id}"

    rowClick(row: any){
      //Grab row.id and interpolate it so result is "/List/Detail/1"
      ???
      router.navigate([url]);
    }

Seems like it should be simple, but I'm having a hard time wrapping my head around it.

The idea here is that my list items will sometimes link to one page and sometimes link to a different page depending on the 'link' parameter.

You could use lodash _.template lodash.com/docs/4.17.15#template — Léo Martin
– Léo Martin, Commented Dec 12, 2019 at 22:30
I'm not really sure the structure of the Obj so just put the example in a string literal. — Christopher Marshall
– Christopher Marshall, Commented Dec 12, 2019 at 22:34
I already have lodash in the project so I'll give that a try. Looks like it should work. Thanks! — Kyle Anderson
– Kyle Anderson, Commented Dec 12, 2019 at 22:35

Léo Martin · Accepted Answer · 2019-12-12 22:36:54Z

1

Using lodash _.template:

const compiledTemplate = _.template(this.link);

compiledTemplate({ row });

Using Javascript:

const linkParts = this.link.split('/');

linkParts.pop();
linkParts.push(row.id);
const linkWithRowId = linkParts.join('/');

answered Dec 12, 2019 at 22:36

Léo Martin

7467 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically interpolating string with specific object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related