How to add dynamic array index value in angular html page

Question

I am new to angular I want to add dynamic array index value in html page. I tried different solution I am not getting a solutions. I am not getting any error as well.

I have create a array in typescript as shown below

my typescript

months : string[] = ['January','February','March','April','May','June','July','August','September','October','November','December'];

the above array I want to pass dynamic index value in html page. I tried but I am not getting the value.

I tried like this {{ months[ result.startDate.split('/')[1] ] }} . If i type static index value it is working.

html page

 <div class="row" style="width: 110%;" *ngFor="let result of allEvents">

              <p class="start-date" >{{ result.startDate.split('/')[0]  }} </p> <br><p  >{{  months[ result.startDate.split('/')[1]  ]  }} </p>

        </div>

result object I am getting

0:
_id: "5e8b033bd3d04a24db92288a"
name: "Casting call for kannada movie"
description: "Looking for:↵Female artist Age: 17-26↵Kids Age :4-12"
startTime: "6"
endTime: "21"
startDate: "04/04/2020"
endDate: "31/05/2020"
participant: []
userId: "5e536de00d691f6427bcaec1"
pageId: {profileImage: {…}, coverPage: {…}, isBlocked: false, softDelete: false, isVerified: true, …}
createdAt: "2020-04-06T10:23:55.874Z"
updatedAt: "2020-04-06T10:23:55.874Z"

please help me

thanks in advance

@sigmato, Please console result.startDate.split('/')[1] and see the output — Alok Mali
– Alok Mali, Commented Apr 7, 2020 at 7:08
@AlokMali If i display only result.startDate.split('/')[1] I am getting value as 04 — sigmato
– sigmato, Commented Apr 7, 2020 at 7:11
@sigmato What is your expected output? For startDate: "04/04/2020", what do you want to display in template? — Adrita Sharma
– Adrita Sharma, Commented Apr 7, 2020 at 7:18

Alok Mali · Accepted Answer · 2020-04-07 07:44:02Z

2

That why it is not working. You need to remove 0 from 04 before putting value in the month array.

Parse your index with parseInt before passing it in the month array.

Please see the example below. It is in core JS.

Let me know, If you want it in an angular format I will create a stackblitz example for you

var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var result = {};
result.startDate = "04/04/2020";
var key = parseInt(result.startDate.split('/')[1]);
console.log(months[key]);

Please check this link for an example in angular - Example

edited Apr 7, 2020 at 7:44

answered Apr 7, 2020 at 7:20

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

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

5 Comments

sigmato Over a year ago

I tried but it is not working. Can u make me a angular format. it will be hepfull

sigmato Over a year ago

if I display like this {{ months[ (04) ] }} it is working fine. but not dynamic

Alok Mali Over a year ago

Please wait, I am creating an example in angular. I will share a link in a moment.

Alok Mali Over a year ago

@sigmato, I have added a link to example please check it.

sigmato Over a year ago

thank you very very much for helping bro now its working. I was trying this from yeserday. Finally solved thank you once again

Adrita Sharma · Accepted Answer · 2020-04-07 07:48:42Z

1

Try like this:

.html

<p class="start-date" > </p> <br><p>{{getMonthName(result.startDate) }} </p>

.ts

getMonthName(month) {
  return this.months[(parseInt(month.split("/")[1])-1)];
}

Working Demo

answered Apr 7, 2020 at 7:48

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Adrita Sharma Over a year ago

You are welcome. Do add -1, else you will get May for 04 which should be april (Array starts with 0 :D)

Santosh Shinde · Accepted Answer · 2020-04-07 09:14:53Z

0

component.html

 <div> {{getMonthName(result.startDate) }} </div>

component.ts

getMonthName(date) {
    return this.months[(new Date(date).getMonth())]
  }

answered Apr 7, 2020 at 9:14

Santosh Shinde

1,21210 silver badges18 bronze badges

Comments

Eliseo · Accepted Answer · 2020-04-07 09:19:35Z

0

Another aproach is transfor your object so, startDate and endDate becomes Date

allEvents.forEach(x=>{
   x.startDate=new Date(x.startDate)
   x.endDate =new Date(x.endDate )
})

And use pipeDate

{{result.startDate| date:'MMM'}}

answered Apr 7, 2020 at 9:19

Eliseo

58.8k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to add dynamic array index value in angular html page

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Related