<div *ngFor="let grupo of indicadores">

  <div class="card color-primary">
    <div class="card-header">
      <h5 class="card-header-text text-white" >{{grupo.NOME}}</h5>
    </div>
  </div>

  <div class="row" *ngFor="let indicador of grupo['indicador']">
    <div class="col-sm-12">
      <div class="card services">

        <div class="card-header">
          <div class="row">
              <div class="col-sm-12">
                  <h6>
                    <i class="icofont icofont-tasks-alt m-r-5"></i> {{indicador.NOME_INDICADOR}}
                  </h6>
              </div>
          </div>
        </div>

        <div class="card-body">
          <div class="form-group row" *ngFor="let varia of indicador['variavel']; let idx = index;">
            <label class="col-sm-11 col-form-label">{{idx + 1}} - {{varia.NOME}}</label>
            <div class="col-sm-1">
              <input type="text" class="form-control">
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="task-list-table">
            <p class="task-due">
              <strong> META : </strong>
              <strong class="label label-warning">{{indicador.META_UNIDADE}}</strong>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" popoverTitle="Primary color states" placement="bottom" [ngbPopover]="primaryContent">Salvar</button>