.Net Core -Cadastro de Clientes com Angular

Vamos iniciar uma aplicação criando as páginas Home e Clientes.

Criaremos o componente header para que possamos inserir o menu:

      
       ng genarate component header
       
    

Quando criamos o componente, automaticamente este componente é adicionado no módulo app.module.ts.

      
        @NgModule({
          declarations: [
          AppComponent,
          HeaderComponent
          ]
        })
       
    

No arquivo header.component.html vamos inserir o código bootstrap de um componente de menu navbar:

      
        < nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
        < a class="navbar-brand col-sm-3 col-md-2 mr-0 href="#"> Angular .net< /a>
        < input class="form-control form-control-dark w-100" type="text" placeholder="Digite alguma informação" aria-label="Search" >
        < button class="btn btn-primary" style="margin-left:10px">Buscar< /button>
        < /nav>
       
    

No módulo principal, no arquivo app.component.html, vamos inserir o componente app-header, referente ao menu que criamos no passo anterior:

      

       < app-header> < /app-header>

       < div class="content" role="main"> 
        < div style="text-align:center;"> 
          < h1> {{ title}} < /h1>
        < /div>
      < /div>
       
    

Criaremos um novo componente de barra de navegação lateral

      
       ng g c navegacao
       
    

No módulo principal, no arquivo app.component.html, vamos inserir o componente app-navegacao:

      
       < app-header> < /app-header>

       < div class="container-fluid"> 
        < div class="row"> 
          < app-navegacao> < /app-navegacao>
        < /div>
       < /div>

       
    

No arquivo navegacao.component.html vamos inserir o código bootstrap de um componente de navegacao:

      
        < nav class="col-md-2 d-done d-md-block bg-light sidebar">
          < div class="sidebar-sticky">
            < ul class = "nav flex-column"
              < li class="nav-item">
                < a class="nav-link active" href="/"> 
                  Dashboard < span class="sr-only">(current) < /span>
                < /a>
              < /li>
              < li class="nav-item">
                < a class="nav-link active" href="/clientes"> 
                  Clientes
                < /a>
              < /li>
          < div>
        < /nav>
       
    

Vamos criar um novo componente referente a Home.

      
       ng g c home
       
    

No arquivo home.component.html vamos inserir o código bootstrap:

      
        < div class="text-center ">
        < h1 h1 class="display-4"> Projeto integração C# com Angular < /h1>
        < p class="lead">Pensando mais a longo prazo, a determinação clara de objetivos 
                         faz parte de um processo de gerenciamento dos índices pretendidos.
        < /p>
       
    

No módulo principal, no arquivo app.component.html, vamos inserir o componente app-home:

      
       < app-header> < /app-header>

       < div class="container-fluid"> 
        < div class="row"> 
          < app-navegacao> < /app-navegacao>
          < main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> 
            < div class="content" role="main"> 
              < app-home> < /app-home>
              < router-outlet> < /router-outlet>
            < /div>
          < /main>
        < /div>
       < /div>

       
    

Criando Rotas

No módulo principal, faremos a importação do componente de Rotas, o RouterModule.

Em RouterModule.forRoot, teremos a rota da Home, que é o componente HomeComponent, e também iremos criar outro componente chamado NaoEncontradoComponent, no qual qualquer rota que não existir será direcionada para este componente.

      
        import { RouterModule, Routes} from '@angular/router';

        @NgModule({
          declarations: [
          AppComponent,
          ClientesComponent,
          HeaderComponent,
          NavegacaoComponent,
          HomeComponent,
          FooterComponent,
          NaoEncontradoComponent
          ],
          imports: [
            BrowserModule,
            AppRoutingModule,
            HttpCLientModule,
            RouterModule.forRoot([
              { path: '', component: HomeComponent},
              { path: '**', component: NaoEncontradoComponent},
            ])
          ],
          providers:[],
          bootstrap:[AppComponent]
        })
        export class AppModule { }
       
    

Criaremos o novo componente naoEncontradoComponent.

      
       ng g c nao-encontrado
       
    

Iremos criar a rota de Clientes.

      
        RouterModule.forRoot([
        { path: '/clientes', component: ClientesComponent},
      ])
       
    

Para que a página não seja recarregada quando clicamos no item de menu, no componente de navegação, arquivo navegacao.component.html, mudaremos o atributo href para routerLink.

      
        < nav class="col-md-2 d-done d-md-block bg-light sidebar">
          < div class="sidebar-sticky">
            < ul class = "nav flex-column"
              < li class="nav-item">
                < a class="nav-link active" routerLink="/"> 
                  Dashboard < span class="sr-only">(current) < /span>
                < /a>
              < /li>
              < li class="nav-item">
                < a class="nav-link active" routerLink="/clientes"> 
                  Clientes
                < /a>
              < /li>
          < div>
        < /nav>
       
    

Criando o formulário de Cadastro do Cliente

Para cadastrar clientes, vamos inserir um formulário no arquivo clientes.component.html e declarar a função Salvar() ao clicar no botão:

      
        < form >
          < fieldset>
            < legend>Clientes< /legend>
            < label for="name">Nome:< /label>
            < input type="text" id="name" name="name">
            < label for="telefone">Telefone:
            < input type="text" id="telefone" name="telefone">
            < label for="endereco">Endereço:< /label>
            < input type="text" id="endereco" name="endereco">
            < button type="button" (click)="Salvar()" class="btn btn success" > < /button>
          < /fieldset>
        < /form>
      
       
    

Vamos criar uma classe chamada Cliente, arquivo cliente.ts, para que possamos enviar os dados por post.

      
        export classe Cliente {
          nome:string 
          telefone:string 
          endereco:string
        }
       
    

No arquivo clientes.component.ts, iremos importar, criar uma propriedade e instanciar a classe Cliente.

      
        import { Cliente } from './cliente';
        
        @Component({
          selector: 'app-clientes',
          templateUrl: './clientes.component.html',
          styleUrls: ['./clientes.component.css']
        })
        export class ClientesComponent implements OnInit {
          
          constructor (private http: HttpClient) { }
        
          REST_API_SERVER = "http://localhost:5001/clientes";

          cliente:Cliente
          clientes = []

          ngOnInit(): void {
            this.cliente = new Cliente();
          }

          Salvar(){
            this.http.post(this.REST)API_SERVER, this.cliente).subscribe((clienteRest: Cliente) => {
              this.cliente = new Cliente()
            })
          }
        }
       
    

Vamos utilizar as funções do Two-way data binding fazendo a importação do FormModule no módulo app.module.ts

      
        import { FormModule } from '@angular/forms';
        }
       
    

Vamos utilizar a diretiva ngModel para vincular a propriedade cliente:

      
        < form >
          < fieldset>
            < legend>Clientes< /legend>
            < label for="name">Nome:< /label>
            < input type="text" id="name" [(ngModel)]="cliente.nome" name="name">
            < label for="telefone">Telefone:
            < input type="text" id="telefone" [(ngModel)]="cliente.telefone" name="telefone">
            < label for="endereco">Endereço:< /label>
            < input type="text" id="endereco" [(ngModel)]="cliente.endereco" name="endereco">
            < button type="button" (click)="Salvar() [disabled]="!cliente.nome || !cliente.telefone" class="btn btn success" > < /button>
          < /fieldset>
        < /form>
      
       
    

Iremos inserir uma mensagem de sucesso quando fizermos o cadastro, utilizando a diretiva ngIf.

Primeiro temos que declarar a variavel mensagem no componente clientes.component.ts

      
        export class ClientesComponent implements OnInit {
          mensagem:string
        }
       
    

Depois vamos criar uma div para mostrar a mensagem, utilizando a diretiva ngIf.

      
        < div class="alert alert-success" *ngIf="mensagem" style="margin-top: 10px" >
          {{ mensagem }}
        < /div>
       
    

Ao clicar em Salvar, mostraremos a mensagem - Usuário cadastrado com sucesso!

Utilizaremos também o setTimeout para que a mensagem fique na tela por um tempo e depois seja escondida. Neste caso, ficará na tela durante 2 segundos.

      
        Salvar(){
        this.http.post(this.REST_API_SERVER, this.cliente).subscribe((clienteRest: Cliente) => {
          this.cliente = new Cliente()
          this.mensagem = "Usuário cadastrado com sucesso!"
          setTimeout(() => {
            this.mensagem = undefined;
          },2000)
        })
        }