Append list element in row with specific id

I have a list of rows with specific ids:

<li *ngFor="let app of Apps; let i = index> 
<div id ="{{app[i]}}" class="row">{{app[i]}}</div>

and a list of messages in the form of buttons:

<li *ngFor="let msg of messages; let i = index" id="message-{{ i }}"  >

    <button type="button" id = "btn{{i}}">Message</button>
    <div id="message{{i}}" class="modal">

      <div class="modal-content">
        <span id="close{{i}}" class='close'>&times;</span>

  <br> <br>

I have a another array that contains the name of the apps these messages come from. I want to append the messages (buttons) in the row who’s id matches the name of the app like this:
enter image description here

I am a beginner to html/css/javascript/angular so any kind of pointers and guidance will be helpful!

1 thought on “Append list element in row with specific id”

  1. You don’t want to do this in your template. In your JS:

    1. Make an object type that holds an app and a array of messages.
    2. Iterate through your Apps object and push each element to a new array of the object you made in step one.
    3. Iterate through your messages object and push the message to the array of messages in your new object if it matches the app.
    4. Now in your template you can do an *ngFor on your new object, then add a nested *ngFor on newObject.messages

Leave a Comment