Balance based status update

Question

I am developing a project with typescript and am unable to use js in it.

this project has several routines, and in most of them has this status question, whether it is open, closed or blocked

project below

it is very manual, having to be exchanged the stock, by the user himself

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NbDialogService } from '@nebular/theme';
import { Entradaestoque } from '../../../@core/data/miscellaneous/entradaestoque.model';
import { EntradaestoqueService } from '../../../@core/mock/miscellaneous/entradaestoque.service';
import { EntradaestoqueBlockComponent } from './entradaestoque-block.component';

@Component({
  selector: 'ngx-entradaestoque',
  template:` 
   <nb-card>
    <nb-card-header>Entrada Estoque</nb-card-header>
    <nb-card-body>
    <table style="min-width:1000px; width: 100%;" mat-table class="content-table" matSort aria-label="Elements" [dataSource]="entradaestoque">
  
  <!-- Status Coluna -->
 <ng-container matColumnDef="status">
   <th class="thead"  mat-header-cell *matHeaderCellDef></th>
   <td class="tbody"  mat-cell *matCellDef="let row">
   <i id='status' [style.color]="(ent_qtde <= 10) ? 'red' : '#0dd50d'" class="material-icons">radio_button_checked</i></td>
 </ng-container>

 <!-- Name Coluna -->
 <ng-container matColumnDef="name">
   <th class="thead"  mat-header-cell *matHeaderCellDef>Produto:</th>
   <td class="tbody"  mat-cell *matCellDef="let row">{{row.ent_name | uppercase}}</td>
 </ng-container>

 <!-- Estado Coluna -->

 <ng-container matColumnDef="fornecedor">
   <th class="thead"  mat-header-cell *matHeaderCellDef>Fornecedor:</th>
   <td class="tbody"  mat-cell *matCellDef="let row">{{row.ent_fornecedor | uppercase}}</td>
 </ng-container>

 <!-- E-mail Coluna -->

 <ng-container matColumnDef="qtde">
   <th class="thead"  mat-header-cell *matHeaderCellDef>Saldo Estoque:</th>
 <td class="tbody" #saldo id="saldo" mat-cell *matCellDef="let row">{{row.ent_qtde | uppercase}}</td>
 </ng-container>
 
 <!-- CPF Coluna -->

 <ng-container matColumnDef="sku">
   <th class="thead"  mat-header-cell *matHeaderCellDef>SKU:</th>
 <td class="tbody"    mat-cell *matCellDef="let row">{{row.ent_sku | uppercase}}</td>
 </ng-container>




 <!-- Vizualizar Coluna --> 


 <ng-container matColumnDef="açôes">
   <th class="thead"  mat-header-cell *matHeaderCellDef>Açôes</th>
 <td class="tbody"  mat-cell *matCellDef="let row">
   <a routerLink="vizualizar/{{row.id}}" class="visually">
     <i class="material-icons">visibility</i>
   </a>
   <a routerLink="atualizar/{{ row.id }}"  class="edit" >
     <i class="material-icons">edit</i>
   </a>
   <a routerLink="block/{{ row.id }}"  class="edit" >
     <i class="material-icons">more_vert</i>
   </a>
 </td>
 </ng-container>
 

 
 <tr class="tbody"  mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr class="tbody"  mat-row *matRowDef="let row; columns: displayedColumns;"></tr>


 

</table>

<div id="tes">
  
</div>
</nb-card-body>
<button class="create" routerLink="create">Incluir</button>
  </nb-card>
`,
styleUrls: ['entradaestoque-style.component.scss']
})
export class EntradaestoqueComponent implements OnInit {
  

  entradaestoque!: Entradaestoque[];
  displayedColumns = ['status','name', 'fornecedor', 'qtde','sku', 'açôes'];
  dropdownService: any;

  @ViewChild('test') test: HTMLElement;

constructor( private router: Router, private entradaestoqueService: EntradaestoqueService, private dialogService: NbDialogService) {
  
 }
 


ngOnInit(): void {
  console.log(this.test)
  this.entradaestoqueService.read().subscribe(entradaestoque => {
    this.entradaestoque = entradaestoque
    console.log(entradaestoque)
  })
}



navigateToEntradaestoqueCreate(): void {
  this.router.navigate(['client/create'])
}


}

below is the table source code,(yes, I am using html in typescript itself)

then I thought using Angular Directives: ngStyle could work.

in line 16 - 22

  <!-- Status Coluna -->
 <ng-container matColumnDef="status">
   <th class="thead"  mat-header-cell *matHeaderCellDef></th>
   <td class="tbody"  mat-cell *matCellDef="let row">
   <i id='status' [style.color]="(ent_qtde <= 10) ? 'red' : '#0dd50d'" class="material-icons">radio_button_checked</i></td>
 </ng-container>

ent_qtde receives the quantity of products in stock, direct from the bank only that theoretically this directive would change the color if it was true or false'

only that it always stays in 'true' = 'green'

someone can help me?

Answer 1

You can add a class based on the value of a variable as follows:

<div [class.collapse]="isCollapsed"></div>

If the value of the isCollapsed variable is true, the Collapse class will be applied to div. So you can create a class with the colors you want to apply.

A tip I give is to separate the html file from your ts file, it is easier to read and organize the code.

The notation for the template is as follows:

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.scss']
})

This is an example of a component I have in a project of mine.