javascript - How to create dynamic view in Angular

Question

I want to dynamically create multiple horizontal lines with data I get from json file as shown in picture below. My try do it

Component.html

<div style="text-align: center">
  <div class="flex-items">
    <div *ngFor="let item of timelineObject">
      <h3 class="row text-center">{{ item.data }}</h3>
      <hr id="timeline" />
      <img style="" [src]="item.icon" />
    </div>
  </div>
</div>

Component.css

.flex-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#timeline {
  display: inline-block;
  margin: auto;
  width: 10vh;
  border: 10px solid blue;
}

Answer 1

The html here is not as the one provided by you but I needed some demo data to replicate the expected behaviour. The key here is the flex-box property order. I change the order of h3 and img on every even div timeline-wrapper with the property :nth-child. Also note that in order to display the hr always in the middle, both h3 and img must have the same height.

<div class="flex-items">
  <div class="timeline-wrapper">
    <h3 class="row text-center">2017</h3>
    <hr>
    <img src="https://picsum.photos/200" />
  </div>
  <div class="timeline-wrapper">
    <h3 class="row text-center">2018</h3>
    <hr>
    <img src="https://picsum.photos/200" />
  </div>
  <div class="timeline-wrapper">
    <h3 class="row text-center">2019</h3>
    <hr>
    <img src="https://picsum.photos/200" />
  </div>
  <div class="timeline-wrapper">
    <h3 class="row text-center">2020</h3>
    <hr>
    <img src="https://picsum.photos/200" />
  </div>
</div>

CSS

.flex-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.timeline-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

hr {
  background-color: blue;
  height: 5px;
  width: 100%;
}

h3,
img {
  height: 200px;
  margin: 0;
}

.timeline-wrapper:nth-child(2n) h3 {
  order: 2;
}

.timeline-wrapper:nth-child(2n) img {
  order: 0;
}

.timeline-wrapper:nth-child(2n) hr {
  order: 1;
}

Here is a fiddle: https://jsfiddle.net/w6nvfb4d/32/