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 -y1.1 – Activating the enviroment and installing nodejs
conda install -c conda-forge nodejs -y2 – Installing Angular CLI
npm install -g @angular/cli3 – Creating the Angular App
ng new cities --style=scss4 – Testing the application
cd citiesng serve --open5 – The app will load at http://localhost:4200
6 – Installing the bootstrap
npm install --save bootstrap7 – 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-angular8.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 --open14 – If everythin is ok you gonna see you table with the info
Github Reference: https://github.com/rondweb/frontend/tree/angular12app
Post a Comment