Angular: Estructura de una Tabla de datos

 Tabla de base de datos:

 

Para crear una tabla funcional en Angular, necesitas: Definir una interfaz o clase para representar los datos. Crear un servicio para obtener o manipular los datos. Usar directivas como *ngFor para mostrar los datos en una tabla. Ejemplo: Aquí, *ngFor itera sobre la lista de productos y | currency formatea el precio.

 

TypeScript

// Definición de la interfaz
interface Producto {
  id: number;
  nombre: string;
  precio: number;
}

// Servicio para obtener datos (simulado)
export class ProductoService {
  getProductos(): Producto[] {
    // Lógica para obtener datos desde una API o localmente
    return [{ id: 1, nombre: 'Producto A', precio: 100 }, /* ... */];
  }
}

HTML

<!-- En el componente -->
<table>
	<tr *ngFor="let producto of productos">
    <td>{{ producto.id }}</td>
    <td>{{ producto.nombre }}</td>
    <td>{{ producto.precio | currency }}</td>
    </tr>
</table>

Construcción de una Tabla de Base de Datos

Configurar el Servidor Backend (usando JSON Server): Instalar JSON Server:

 npm install -g json-server 

Crear un archivo db.json:

 {
  "users": []
} 

Iniciar JSON Server:

 json-server --watch db.json 

JSON Server estará disponible en http://localhost:3000.

Configurar el Componente para Mostrar Datos:

example.component.ts

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  model = {
    name: '',
    email: ''
  };
  users = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.fetchUsers();
  }

  fetchUsers() {
    this.http.get('http://localhost:3000/users')
      .subscribe((data: any) => {
        this.users = data;
      });
  }

  onSubmit() {
    this.http.post('http://localhost:3000/users', this.model)
      .subscribe(() => {
        this.fetchUsers();
      });
  }
} 

example.component.html:

 <form (ngSubmit)="onSubmit()" #form="ngForm">
  <label for="name">Name:</label>
  <input type="text" id="name" required [(ngModel)]="model.name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" required [(ngModel)]="model.email" name="email">
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>
<table>
  <thead>
  <tr>
  <th>Name</th>
  <th>Email</th>
  </tr>   </thead>
  <tbody>
  <tr *ngFor="let user of users">
  <td>{{ user.name }}</td>
  <td>{{ user.email }}</td>
  </tr>
  </tbody>
</table>
 

...