Angular NG-FOR and NG-IF

Question

I am trying to create a sidebar with dynamic links, but there is an error.

Component.

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

@Component({
  selector: 'pl-access-full',
  templateUrl: './access-full.component.html',
  styleUrls: ['./access-full.component.css']
})
export class AccessFullComponent implements OnInit {

  public teamSales = ['Corporate', 'SP Large', 'RJ Large', 'GAM'];

  public accountManagers = [
    {team: 'Corporate', name: 'Bugnaro'},
    {team: 'Corporate', name: 'Allan'},
    {team: 'Corporate', name: 'Vinícius'},
    {team: 'SP Large', name: 'Wanderson'},
    {team: 'SP Large', name: 'Alberto'},
    {team: 'SP Large', name: 'Cristiano'},
    {team: 'RJ Large', name: 'Marfil'},
    {team: 'RJ Large', name: 'Marini'},
    {team: 'RJ Large', name: 'Pitta'},
    {team: 'GAM', name: 'Luciano'},
    {team: 'GAM', name: 'Magda'},
    {team: 'GAM', name: 'Érico'}
  ]

  constructor() { }

  ngOnInit() {
  }

}

Component.html

<ng-container *ngFor="let teamSale of teamSales">
  <h6>{{ teamSale }}</h6>
  <nav class="nav flex-column">
      <a class="nav-link" *ngFor="let accountManager of accountManagers">
        <ng-container *ngIf="accountManager.team === teamSale"> {{ accountManager.name }}</ng-container>
      </a>
    </nav>
</ng-container>

But the end result is not what I expect. It seems that it generated blank lines. I wish there were no blank lines.

Answer 1

One possibility would be to first separate your array by time.

Your component would look like this:

import { Component } from '@angular/core';

@Component({
  selector: 'pl-access-full',
  templateUrl: './access-full.component.html'
})
export class AccessFullComponent {
  private readonly teamSales = ['Corporate', 'SP Large', 'RJ Large', 'GAM'];

  private readonly accountManagers = [
    {team: 'Corporate', name: 'Bugnaro'},
    {team: 'Corporate', name: 'Allan'},
    {team: 'Corporate', name: 'Vinícius'},
    {team: 'SP Large', name: 'Wanderson'},
    {team: 'SP Large', name: 'Alberto'},
    {team: 'SP Large', name: 'Cristiano'},
    {team: 'RJ Large', name: 'Marfil'},
    {team: 'RJ Large', name: 'Marini'},
    {team: 'RJ Large', name: 'Pitta'},
    {team: 'GAM', name: 'Luciano'},
    {team: 'GAM', name: 'Magda'},
    {team: 'GAM', name: 'Érico'}
  ];

  public managersByTeams = {};

  constructor() {
    this.teamSales.forEach(team => {
      const temp = this.accountManagers.filter(f => f.team === team);
      this.managersByTeams[team] = temp;
    });
  }
}

And the template:

<ng-container *ngFor="let teamSale of teamSales">
    <h6>{{ teamSale }}</h6>
    <nav class="nav flex-column">
      <a class="nav-link" *ngFor="let manager of managersByTeams[teamSale]">
        {{ manager.name }}
      </a>
    </nav>
</ng-container>