riLink importantes

node.js
https://nodejs.org/en/

angular
https://angular.io/start

bootstrap
https://getbootstrap.com.br/

json-server
https://www.npmjs.com/package/json-server

angular material
https://material.angular.io/

Comandos importantes no terminal node

Instalar o servidor json-server

npm install -g json-server

start no servidor json sever

json-server --watch db.json

testar o servidor json server

localhost:3000

no arquivo packge.json colocar a linha (10) abaixo de test

"server": "json-server --watch db.json"

1 criar o componente aluno

ng g c aluno

2 - instalar o angular material

ng add @angular/material --local

ou

ng add @angular/material --global

ou
ng add @angular/material --location=global

importar os componentes do material para module.ts

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
e imports

testar o angular material

<mat-slide-toggle>Toggle me!</mat-slide-toggle> no componente html

colocar a barra de menu do angular material (toolbar)

no aluno.ts
criar o vetor
alunos: Aluno [ ]=[
{id:1,nome: 'José',cpf: '123-456-789-10',email:'jose@gmail.com',idade:45},
{id:2,nome: 'Maria',cpf: '123-456-789-11',email:'maria@gmail.com',idade:20},
{id:3,nome: 'João',cpf: '123-456-789-12',email:'joao@gmail.com',idade:30},
{id:4,nome: 'Nair',cpf: '123-456-789-13',email:'nair@gmail.com',idade:26},
];

no module.ts colocar
import { HttpClientModule } from '@angular/common/http';
e importar o httpclientModule

Colocar a tabela do angular material no component aluno html e configuar as opções

<table mat-table [dataSource]="alunos" class="mat-elevation-z8">

<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef> Nome </th>
<td mat-cell *matCellDef="let alunos"> {{ alunos.nome }} </td>v
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

displayedColumns = ['nome'];

Alterar o aquivo db.json

{
"alunos": [

{"id":"1","nome": "José","cpf": "123-456-789-

10","email":"jose@gmail.com","idade":"45"}

instalar serviço listar

ng g s servico/listar

em listar.service.ts importar as linhas

import { Aluno } from '../classe/aluno';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

ainda neste arquivo em expor class

@Injectable({
providedIn: 'root'
})
export class ListarService {

private apiUrl = 'http://localhost:3000/aluno';

constructor(private http:HttpClient) { }

pegarTodos():Observable< Aluno[ ]>{

return this.http.get< Aluno[ ]>(this.apiUrl);
 }

colocar em aluno component.ts

em import
import { Aluno } from '../classe/aluno';
import { ListarService } from 'src/app/servico/listar.service';

depois no fim do arquivo

constructor(private listarServico:ListarService) {
this.pegarAlunos();

}
pegarAlunos():void{
this.listarServico.pegarTodos().subscribe((alunos:any) => (this.alunos =
alunos));
}