angular 2/ionic 2 - for loop in ts

Question

I want to assign index to the content , in order to add infowindow to markers based on their index .

console.log(storeData.length) will returns 4 rows of data.

Right now, both method returns me the same result, 4 infowindow overlay with each other. I seem a lot of examples , however I do not know how to implement to my code. Especially the var marker,i;

TS

for ( let infowindowData of storeData){

  let content = '<ion-item>' + 
     '<h2 style="color:red;">' + infowindowData.ListingTitle +'</h2>' + 
     '<p>' + infowindowData.ListingDatePosted + ' ' + infowindowData.ListingTime + '</p>' +
     '</ion-item>';    

     this.addInfoWindow(marker, content);

}    

What I tried

 let storeData =  this.data;

 for(let i=0; i<storeData.length;i++){

 let content = '<ion-item>' + 
     '<h2 style="color:red;">' + storeData[i].ListingTitle +'</h2>' + 
     '<p>' + storeData[i].ListingDatePosted  + ' ' + storeData[i].ListingTime  + '</p>' +
     '<p> Salary: $' + storeData[i].ListingSalary  + '</p>' +
     '</ion-item>';    


 let infoWindow = new google.maps.InfoWindow({
 content: content
 });

 google.maps.event.addListener(marker, 'click', () => {
 infoWindow.open(this.map, marker);
 });

 }

Answer 1

Hello why mixing html in the ts? maybe you have a specific reason for doing this but I don't think this is the way you want to go with angular. I would prefer this way by defining that html in a component with input parameters which can be reusable and testable. I am just putting the bare code. if you need additional help, you can ask.

create a component as follows:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'info-window',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class InfoWindowComponent implements OnInit {

  @Input('title') listingTitle :string;
  @Input('date') datePosted :string;
  @Input('time') listingTime :string;
  constructor() { }

  ngOnInit() {
  }

}

The corresponding html is as follows:

<ion-item> 
     <h2 style="color:red;">{{listingTitle}}</h2> 
     <p>{{datePosted}} {{listingTime}}</p>
</ion-item>

then in your other component where you need to use the above component. See the TS below //guess storedata is an array

private storeData: infowindowData[];

your template can be follows. You can decide what to do with the index. You can create an additional input parameter in the component and pass it there. Any additional logic for that component can be done there as well in OnInit.

<li *ngFor="let infoWindow of storeData; let index = index">
  <info-window [title]=infoWindow.ListingTitle
[date]=infoWindow.ListingDatePosted [time]=infoWindow.ListingTime></info-window>
</li>

Hope that helps. Ashley