Como criar um usuário com o angular?

Estou começando a estudar angular e estou querendo criar uma página de login, mas fiquei em dúvida em como criar usuário com angular.

Bem, o primeiro passo é usar o gerador do próprio angular, na pasta app do seu projeto para criar o componente de login.

Criando tela de login de usuário com o angular

ng g c login

Em seguida, você edita o arquivo login.component.html. Levando em consideração que você está usando Bootstrap, apaga todo o conteúdo desse arquivo e insere o código abaixo:

<div class="d-flex justify-content-center align-items-center">

    <div class="card p-3">

<form>

     <class="form-group">

            <label for="email">E-mail</label>

            <input type="text" id="email" class="form-control">

    </div>

    <div class="form-group">

       <label for="senha">Senha</label>

        <input type="password" id="senha" class="form-control">

    </div>

        <div class="form-group">

            <button class="btn btn-success" type="submit">Entrar</button>

        </div>

      </form>

    </div>

</div>

O resultado deste código é essa imagem abaixo:
template-Login

Tornando o formulário reativo com ReactiveFormsModule

Este tipo de formulário é reativo, mas existem também formulários orientados a modelo. O próximo arquivo que vamos editar é o login.component.ts. Este arquivo vai ficar assim:

import { Component } from '@angular/core';import { FormBuilder } from "@angular/forms";@Component({
    selector:'app-login',
    templateUrl:'./login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent {
    form;
    constructor(privateformBuilder:FormBuilder) {
        this.criarForm();
    }
    criarForm()
{
        this.form = this.formBuilder.group({
            email: [''],
            senha: ['']
        }):
    }
}

Após isso você importa o ReactiveFormsModule no app.module.ts, que vai ficar da seguinte maneira:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
    declarations: [
        AppComponent,
        LoginComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Agora o login/login.component.html pode ser atualizado com os métodos do ReactiveFormsModule:

<div class="d-flex justify-content-center align-items-center">
<div class="card p-3">
        <form [formGroup]="form" (ngSubmit)="login()" > 
            <div class="form-group">
                <label for="email">E-mail</label>
                <input type="email" id="email" class="form-control"  formControlName="email"
 requiredminlength="5">
            </div>
           <div class="form-group">
               <label for="senha">Senha</label>
               <input type="password" id="senha" class="form-control" formControlName="senha"
 requiredminlength="8">
           </div>
           <button class="btn btn-success" type="submit"  [disabled]="!form.valid">Entrar</button> 
           <p *ngIf='mensagem != ""' class="alert alert-primary mt-2">{{ mensagem }}</p>
           </div>
       </form>
    </div>
</div>

Testando formulário de login com angular

Como não criei nenhum backend aqui, vou só mostrar como testar a validação frontend de login com sucesso ou não. Pra isso, adiciona 3 variáveis no login/login.component.ts e depois acrescente a função de login no componente.

emailDB: string = "[email protected]";

senhaDB: string = "12345678";

mensagem: string;

login()
  {
    if (this.form.get('email').value == this.emailDB && this.form.get('senha').value == this.senhaDB) {
        this.mensagem = "Login feito com sucesso!";
    } else {
      this.mensagem = "E-mail ou a senha estar errado!"; 
    }
  }

Caso o login seja feito com as variáveis que estão hardcoded, ele vai exibir a primeira mensagem, caso seja feito com qualquer outro valor, vai aparesentar a segunda mensagem e o login vai “falhar”.