On this article let’s create a simple web app using angular to show a table with dynamic information et configure some aspects like filtering, ordering, styling…
1 – Creating a Conda enviroment with Python 3.9
conda create --name envAngular python=3.9 -y
1.1 – Activating the enviroment and installing nodejs
conda install -c conda-forge nodejs -y
2 – Installing Angular CLI
npm install -g @angular/cli
3 – Creating the Angular App
ng new cities --style=scss
4 – Testing the application
cd cities
ng serve --open
5 – The app will load at http://localhost:4200
6 – Installing the bootstrap
npm install --save bootstrap
7 – Configuring bootstrap style and js
7.1 – Find the file in your project named angular.json and edit the styles:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/bootstrap/dist/css/bootstrap.js"
]
8 – Installing the AG-GRID
npm install --save ag-grid-community ag-grid-angular
8.1 – Configuring the style of AG-GRID
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";
9 – Editing the index.html
9.1 – Replace all the code with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ReleaseManager 3</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<main>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<app-root></app-root>
</main>
</body>
</html>
10 – Editing grid on app.component.html
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-alpine" [rowData]="rowData"
[columnDefs]="columnDefs" rowSelection="multiple">
</ag-grid-angular>
</div>
</div>
11 – Create the file city.ts
export interface City {
ID: string;
Nome: string;
Estado: string;
}
12 – Create the file city.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { City } from './city';
@Injectable({
providedIn: 'root',
})
export class CityService {
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
constructor(private http: HttpClient) { }
getCities(): Observable<City[]> {
return this.http.get<City[]>('http://localhost:8000/cities.json').pipe(
tap(_ => this.log('fetched cities')),
catchError(this.handleError<City[]>('getCities', []))
);
}
/**
* Handle Http operation that failed.
* Let the app continue.
* @param operation - name of the operation that failed
* @param result - optional value to return as the observable result
*/
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
private log(message: string) {
console.log(`HeroService: ${message}`);
}
}
13 – Run the app!
ng serve --open
14 – If everythin is ok you gonna see you table with the info
Github Reference: https://github.com/rondweb/frontend/tree/angular12app
English