how to create a hyperlink for values from an array in Angular 8

Question

I have data that looks something like this

plans:[
  {
    "planName": "PlanA",
    "planCode": "PLN001"
  },
  { 
    "planName": "PlanB",
    "planCode": "PLN002"
  },
  {
    "planName": "PlanC",
    "planCode": "PLN003"
  }
]

I need to display in UI HTML like below

<p> User 1 is enrolled in PlanA , PlanB , PLanC </p>

question1: How to get the values from the plans array to display like above with commas in one statement.

question2: I need to give a hyperlink to each plan to the question1 statement which will take to a different component based on the plan code.

<a href="#{planCode}_details">{{PlanName}}</a>

The other components that the hyperlink has to take have an id to it

id="{{p.planCode}}_details"

Any help is appreciated

This is what I tried so far.

<p *ngIf="plans?.length > 0">{{UserName}} has a balance in the {{plans.planName.join(', ')}} .</p>

you can solve the first one using this let a ='' and then map the plans array plans.map(x=> a= a.concat(' ,',x.planCode)) — Aravind
– Aravind, Commented Jun 3, 2020 at 17:50

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Question 1

var plans = [ { "planName": "PlanA", "planCode": "PLN001" }, { "planName": "PlanB", "planCode": "PLN002" }, { "planName": "PlanC", "planCode": "PLN003" }]

var result = (plans.map(plan => plan.planName)).reduce((acc, curr) => acc + ', ' + curr)

console.log(result);

You could try the following to obtain a comma separated string of all planName properties.

planNames: string;

this.planNames = (plans.map(plan => plan.planName)).reduce((acc, curr) => acc + ', ' + curr);

And use it the template

<p> User 1 is enrolled in {{ planNames }} </p>

Question 2

You could bind member variables to the href attribute using either data binding notation or interpolation.

<ng-container *ngFor="let plan of plans">
  <a href="#{{ plan?.planCode }}_details">{{ plan?.PlanName }}</a>
</ng-container>

Update

I am not sure what you're exactly after, but to combine both the questions, you could do something like following

<p>User 1 is enrolled in 
  <ng-container *ngFor="let plan of plans; let last=last">
    <a href="#{{ plan?.planCode }}_details">{{ plan?.PlanName }}</a>
    <ng-container *ngIf="!last">
      ,&nbsp;
    </ng-container>
  </ng-container>
</p>

In this case you do not need the additional variable planNames.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 3, 2020 at 17:49

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

3 Comments

Margerine Over a year ago

Thanks for the response...but i need to add hyperlinks to the question1..User 1 is enrolled in PlanA , PlanB , PLanC ... Here i should be abe to click on Plan A or PlanB or PLanC which should take to the detail section

Barremian Over a year ago

@Margerine: I've updated the answer, but you need to make sure the hyperlinks actually redirect to the details. I'd recommend you to look into Angular Router to setup routes using Angular way.

Margerine Over a year ago

Thanks That helped.

Rick · Accepted Answer · 2020-06-03 18:23:00Z

0

Maybe this:

<p> User 1 is enrolled in 
  <a *ngFor="let plan of plans" href="#{{plan.planCode}}_details">{{plan.PlanName}}</a>
</p>

answered Jun 3, 2020 at 18:23

Rick

1,88213 silver badges21 bronze badges

Collectives™ on Stack Overflow

how to create a hyperlink for values from an array in Angular 8

2 Answers 2

Question 1

Question 2

Update

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Question 1

Question 2

Update

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related