Invert the HTML of an Angular component

user_13734085 0
Viewed 52

Bonjour, I have a problem with the html of my project.

Currently, I have a tab component like this :

<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statusChangementPrix" [statusCounter]="statusVendu">
    </app-graphic>
  </div>
</div>
<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statutNouveauBien" [statusCounter]="statusOffre">
    </app-graphic>
  </div>
</div>
<div class="row-page">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="statusNouveauCompromis" [statusCounter]="statusArchive">
    </app-graphic>
  </div>
</div>

In this tab component I multiply 3 times the graphic component :

<div class="wrapper-row-graphic">
  <div class="wrapper-graphic">
    <div class="wrapper-indicator">
      <div class="indicator-graphic">
        <button mat-mini-fab 
           color="primary" 
           class="figureGraphic" 
           *ngIf='graphicData'>
           {{graphicData.length}}
        </button>
      </div>
      <div class="status">
        <h4 *ngIf='statusGraphic'>{{statusGraphic}}</h4>
      </div>
    </div>
    <div class="graphic">
      <highcharts-chart 
        [Highcharts]="Highcharts" 
        [options]="chartOptions" 
        style="height: 150px; display: block;">
      </highcharts-chart>
      <!-- <div id="container" style="height: 150px; margin: 2px;"></div> -->
    </div>
  </div>
  <div class="wrapper-infos">
    <div class="indicator-counter">
      <button mat-fab color="primary" class="figureIndicator">
        <mat-icon *ngIf='counterData'>{{counterData.length}}</mat-icon>
      </button>
    </div>
    <div class="infos">
      <h4 *ngIf='statusCounter'>{{statusCounter}}</h4>
    </div>
  </div>
</div>

I would like to know if it was possible to reverse the direction of a component in the tab component? Because currently the 3 graphic components are identical. On the left the graphic and on the right the counter. I would like to position the counter on the left and the graph on the right on the second line.

I tried with a row-reverse but it doesn't look very nice.

angular
1 Answers

You can create an array in which you can persist the reference of the input values of component i.e.

this.graphic = [{
    statusGraphic: statusChangementPrix,
    statusCounter, statusVendu
},{
    statusGraphic: statutNouveauBien,
    statusCounter, statusOffre
},{
    statusGraphic: statusNouveauCompromis,
    statusCounter, statusArchive
}]

And render HTML using *ngFor

<div class="row-page" *ngFor="let item of graphic">
  <div class="container-graphic">
    <app-graphic [statusGraphic]="item.statusGraphic" [statusCounter]="item.statusCounter">
    </app-graphic>
  </div>
</div>

Then perform reverse on the array.

user_16685330
Related