How to hide an element of dynamic table in Angular 9

Viewed 1034

I have a table and i have generated columns and rows dynamically.

This is my table.component.html

  <table id="tabella" class="table table-striped table-hover">
    <thead class="thead-dark">
      <tr>
        <th *ngFor="let header of _object.keys(utenti[0]); let i = index"> {{header}}</th>

      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of utenti">

        <th *ngFor="let utente of _object.keys(row)">{{row[utente]}}</th>
      </tr>
    </tbody>
  </table>

and this my table.component.ts

import { Component, OnInit } from '@angular/core';
import { GetUtentiService } from '../../services/getutenti.service';

@Component({
  selector: 'app-utente',
  templateUrl: 'utente.component.html',
  styleUrls: ['./utente.component.css']
})
export class UtenteComponent implements OnInit {

   utenti: any;
   _object = Object;
  visibile: boolean;



  constructor(private _getutentiService: GetUtentiService) { }

  ngOnInit() {

    // Richiamo la funzione definita nel service che effettua una get sul database

    this._getutentiService.getUtenti().subscribe(response => {
      this.utenti = response;
    }, error => {
      console.log(error);
    });
  }
}

this is my service.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class GetUtentiService {

  private url: string = 'http://localhost:56493/Server/GetUtente';
  constructor(private http: HttpClient) { }

  getUtenti() {
    return this.http.get(this.url);
  }
}

Now i want to have control of single cells of my table. I'm trying to hide only ID's column but in this code i'm not able to say "Hide this column if is ID", or i want to format date in dd/mm/yyyy instead of yyyy/mm/dd hh:mm:ss but, again, i have to manage the single cell of my table.

How can i do these changes to my code?

1 Answers

It looks like you have two problems. If I've correctly understood, you need :

  • To add a classname like cell-id to the ID cell,
  • Change your date format from yyyy/mm/dd to dd/mm/yyyy

If it's exact, could you try this :

<tbody>
  <tr *ngFor="let row of utenti">
    <th *ngFor="let utente of _object.keys(row)"
      [ngClass]="{'cell-id': row[utente] === 'id'}">
        {{row[utente]}}
    </th>
  </tr>
</tbody>

For your second problem, have you tried with DatePipe ?

Related