Créer un tableau simple dans AngularJS
Lorsque nous créons des pages Web dans un site Web de commerce électronique, nous devons utiliser un tableau pour présenter des informations volumineuses et complexes telles que les listes de produits et leurs prix, la liste du personnel, les salaires, la date d’embauche, etc.
Les tableaux nous aident à présenter ces données de manière bien structurée et facile à digérer. Cela nous permet également de mieux gérer le parc d’écrans de notre site Web.
Nous allons donc créer une table simple à l’aide de la fonction *ngFor, puis la faire passer dans une base de données. Nous utiliserons le JSON Server Rest API.
Tout d’abord, nous utiliserons l’éditeur de code VS, qui nous permet d’utiliser des terminaux depuis l’intérieur pour installer des dépendances. Ensuite, nous ouvrons le terminal et tapons npm install -g json-server et installons le json server sur notre système.
L’étape suivante consiste à créer un nouveau projet.
Une fois le projet créé, nous ouvrons le dossier du projet et ajoutons un nouveau fichier appelé db.json. C’est là que nous stockons les données auxquelles l’API REST aura accès.
Maintenant, nous naviguons vers le dossier db.json et saisissons les données que nous voulons avoir sur la table.
{
"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"
}
]
}
La prochaine chose à faire est de naviguer dans app.component.html pour créer la table à l’aide de la fonction *ngFor. Mais avant cela, nous devons créer un Rest service qui accédera aux données de db.json.
Puis nous nous dirigeons vers le terminal. Dans le dossier du projet, nous saisissons ng generate service Rest.
Après l’installation, deux fichiers sont créés dans le dossier scr/app, le rest.service.spec.ts et le rest.service.ts. Nous devons maintenant naviguer vers le rest.service.ts pour faire un peu de codage :
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);
}
}
Ce service permet de surveiller les activités dans l’URL souhaitée où la base de données passera.
Ensuite, nous nous dirigeons vers le app.component.html pour créer la table à l’aide de la fonction *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>
La prochaine chose que nous devons faire est de nous diriger vers app.module.ts pour faire un peu plus de codage. Ici, nous ajoutons le HttpClientModule au tableau des importations.
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 { }
Pour rendre la date de la table dans le db.json lisible par le HttpClient, nous devons en faire une propriété de chaîne. Nous créons donc un fichier Users.ts et nous saisissons ces codes :
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;
}
}
La seule chose qui reste à faire à ce stade est d’embellir le tableau en utilisant un style 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;
}
Tout devrait bien fonctionner maintenant, mais nous tombons probablement sur une erreur telle que Parameter mobile a implicitement un type any.
Nous devons naviguer vers le fichier ts.config.json et ajouter noImplicitAny: false à la liste. Ensuite, nous ajoutons également \\ au noImplicitOverride: true, pour rendre le paramètre inactif.
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