Crear una tabla simple en AngularJS
Cuando creamos páginas web en un sitio web de comercio electrónico, necesitamos usar una tabla para presentar información grande y compleja, como las listas de productos y sus precios, lista de personal, salarios, fecha de empleo, etc.
Las tablas nos ayudan a presentar estos datos de una manera bien estructurada y fácil de digerir. También nos permite administrar mejor el estado de la pantalla de nuestro sitio web.
Así que crearemos una tabla simple usando la función *ngFor, luego la pasaremos a través de una base de datos. Haremos uso de la JSON Server Rest API.
Primero, usaremos el editor de VS Code, que nos permite usar terminales desde su interior para instalar dependencias. Luego, abrimos la terminal y escribimos npm install -g json-server e instalamos el json server en nuestro sistema.
El siguiente paso es crear un nuevo proyecto.
Después de crear el proyecto, abrimos la carpeta del proyecto y agregamos un nuevo archivo llamado db.json. Aquí es donde almacenamos los datos a los que accederá el REST API.
Ahora navegamos a la carpeta db.json e ingresamos los datos que queremos tener en la tabla.
{
"Users": [
{
"id": 1,
"firstName": "Nitin",
"lastName": "Rana",
"email": "nitin.rana@gmail.com",
"mobile": "2345678901",
"salary": "25000"
},
{
"id": 2,
"firstName": "Rajat",
"lastName": "Singh",
"email": "rajat.singh1@gmail.com",
"mobile": "5637189302",
"salary": "30000"
},
{
"id": 3,
"firstName": "Rahul",
"lastName": "Singh",
"email": "rahul.singh1@gmail.com",
"mobile": "5557189302",
"salary": "40000"
},
{
"id": 4,
"firstName": "Akhil",
"lastName": "Verma",
"email": "akhil.verma2@gmail.com",
"mobile": "5690889302",
"salary": "20000"
},
{
"id": 5,
"firstName": "Mohan",
"lastName": "Ram",
"email": "mohan.ram1@gmail.com",
"mobile": "7637189302",
"salary": "60000"
},
{
"id": 6,
"firstName": "Sohan",
"lastName": "Rana",
"email": "sohan.rana@gmail.com",
"mobile": "3425167890",
"salary": "25000"
},
{
"id": 7,
"firstName": "Rajjev",
"lastName": "Singh",
"email": "rajeev.singh1@gmail.com",
"mobile": "5637189302",
"salary": "30000"
},
{
"id": 8,
"firstName": "Mukul",
"lastName": "Singh",
"email": "mukul.singh1@gmail.com",
"mobile": "5557189302",
"salary": "40000"
},
{
"id": 9,
"firstName": "Vivek",
"lastName": "Verma",
"email": "vivek.verma2@gmail.com",
"mobile": "5690889302",
"salary": "20000"
},
{
"id": 10,
"firstName": "Shubham",
"lastName": "Singh",
"email": "shubham.singh@gmail.com",
"mobile": "7637189502",
"salary": "60000"
}
]
}
Lo siguiente que debe hacer es navegar por app.component.html para crear la tabla usando la función *ngFor. Pero antes de eso, tenemos que crear un servicio Rest que accederá a los datos de db.json.
Luego nos dirigimos a la terminal. En la carpeta del proyecto, introducimos ng generate service Rest.
Después de la instalación, se crean dos archivos en la carpeta scr/app, el rest.service.spec.ts y el rest.service.ts. Ahora necesitamos navegar a rest.service.ts para hacer algo de codificación:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Users } from './Users';
@Injectable({
providedIn: 'root'
})
export class RestService {
constructor(private http : HttpClient) { }
url : string = "http://localhost:3000/Users";
getUsers()
{
return this.http.get<Users[]>(this.url);
}
}
Este servicio ayuda a monitorear las actividades en la url deseada por donde pasará la base de datos.
Luego nos dirigimos a app.component.html para crear la tabla usando la función *ngFor:
<h1>Table using JSON Server API</h1>
<hr>
<table id="users">
<tr>
<th *ngFor="let col of columns">
{{col}}
</th>
</tr>
<tr *ngFor="let user of users">
<td *ngFor="let col of index">
{{user[col]}}
</td>
</tr>
</table>
Lo siguiente que debemos hacer es dirigirnos a app.module.ts para hacer más codificación. Aquí agregamos el HttpClientModule a la matriz de importaciones.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Para que la fecha de la tabla en db.json sea legible por HttpClient, debemos convertirla en una propiedad de cadena. Entonces creamos un archivo Users.ts e ingresamos estos códigos:
export class Users
{
id : string;
firstName : string;
lastName : string;
email : string;
mobile : string;
salary : string;
constructor(id, firstName, lastName, email, mobile, salary)
{
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.mobile = mobile;
this.salary = salary;
}
}
Lo único que queda por hacer en este punto es embellecer la tabla usando algún estilo CSS:
h1
{
text-align: center;
color: #4CAF50;
}
#users {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#users td, #users th {
border: 1px solid #ddd;
padding: 8px;
}
#users tr:nth-child(even){background-color: #f2f2f2;}
#users tr:hover {background-color: #ddd;}
#users th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
Todo debería funcionar bien ahora, pero es probable que tropecemos con un error como Parameter mobile implícitamente tiene un tipo cualquiera.
Necesitamos navegar al archivo ts.config.json y agregar noImplicitAny: false a la lista. Luego, también agregamos \\ a noImplicitOverride: true,, para desactivar la configuración.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn