Angular ngFor flex-grow

Question

Angular seems to be inserting additional elements in the dom/html, causing flex-grow not to be applied to the right element. A fully working hardcoded version is present, but I am struggling to make it accept a dynamic number of items. See better here:

````https://codepen.io/beaversArePeopleToo/pen/GReydYJ

Answer 1

is this the expected output?

I am using ngFor to create the elements and we can add the line class item between them, we can prevent the last element from having ***** by using the ngfor variable last to prevent the last one!

// app.js

const { Component, VERSION } = ng.core;

@Component({
  selector: "my-app",
  template: `
    <h1>{{ title }}</h1>
    <div class="items-container how-unhardcode-it">
    <ng-container  *ngFor="let item of items; let index = index;let last = last">
        <div class="item">
          {{ item }}
        </div>
        <div class="line" *ngIf="!last">
          ******
        </div>
      </ng-container>
    </div>
    <div class="items-container how-unhardcode-it">
      <div class="line" *ngFor="let item of items; let index = index">
        {{ item }}
      </div>
    </div>
    
    <div class="items-container how-it-should-be">
      <div class="item">
        {{ items[0] }}
      </div>
      <div class="line">
        ******
      </div>
      <div class="item">
        {{ items[1] }}
      </div>
      <div class="line">
        ******
      </div>
      <div class="item">
        {{ items[2] }}
      </div>
    </div>
  `
})
class AppComponent {
  title = "hello world angular 6";
  constructor() {
    // TODO: Define your Angular component implementation
  }
  items = ["alpha", "bravo", "charlie"];
}

// main.js
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;

@NgModule({
  imports: [BrowserModule, CommonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
class AppModule {}

const { platformBrowserDynamic } = ng.platformBrowserDynamic;

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

console.log("hola");

stackblitz

Answer 2

This appears to be a styling question so why not use CSS to solve? It's cleaner, flex will grow the row to fill horizontal space and space out any number of elements evenly (however depending on the number and their width you may get overflow).

<div class="items-container">
  <div *ngFor="let item of items" class="item">
    {{ item }}
  </div>
</div>

.items-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

div.items-container {
  & div.item:not(:last-of-type) {
      border-right: 1px dotted black;
  }
}