Ajustes no CSS por variável - resolvido

Front-end
#1 
.table-contents {
  width: 100% !important;
  overflow-x: hidden;
  margin-top: -20px;
  .datatables {
    display: flex;
    div.datatable1 {
      width: 30%;
      table:nth-child(1) {
        thead:nth-child(1) {
          th {
            padding: 1rem !important;
            text-align: center;
          }
          tr {
            white-space: nowrap;
            text-align: center;
            background: #e6e6e6;
            td {
              padding: 0.7rem !important;
            }
          }
        }
        tbody {
          white-space: nowrap;
        }
      }
    }
    div.datatable2 {
      width: 70%;
      overflow-x: scroll;
      table {
        thead {
          th {
            tr:nth-child(1) {
              display: inline-table !important;
              white-space: nowrap;
              text-align: center;
              background: #e6e6e6;
              td {
                padding: 0.7rem !important;
              }
            }
            tr:nth-child(2) {
              display: inline-table !important;
            }
          }
        }
        tbody {
          white-space: nowrap;
          tr {
            td {
              tr {
                width: 100%;
                display: inline-table;
              }
            }
          }
        }
      }
    }
  }
}

Mais de dois fornecedores:

image
image.png1540×660 46.6 KB

Dois fornecedores:

image
image.png1554×454 34.6 KB

Como faço para mudar estes valores, automáticos ?

    div.datatable1 {
      width: 30%;

   div.datatable2 {
      width: 70%;
#2

Vc quer, dinamicamente, aplicar um ou o outro estilo de acordo com alguma condição?

1 curtida
#3

Pelo que fiz aqui, sim. Preciso saber da quantidade de registros que vem do backend, e assim ajusto as duas porcentagens, para dar 100%

#4

Parece que assim funciona (nunca usei):

[style.height.%]="height">Some stuff in this div</div>

Para usar com classes CSS, tu pode usar o ng-class:

<some-element [ngClass]="{'datatable1': true, 'datatable2': false }">...</some-element>

Assim, ele vai aplicar a classe que o valor for true (tu pode usar propriedades ou funções do componente para fazer a condição que precisa).

FONTE: https://angular.io/api/common/NgClass

1 curtida