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, Jun 03 '20 at 17:50

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

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 — Margerine, Jun 03 '20 at 17:59
@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. — ruth, Jun 03 '20 at 18:21

score 0 · Answer 2 · answered Jun 03 '20 at 18:23

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 03 '20 at 18:23

Rick

1,710
8
17

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

2 Answers2

Question 1

Question 2

Update