Skip to main content

​
RegisterPage Component

The RegisterPage component provides the user interface for creating new user accounts in the Karma Ecommerce application. It handles user registration by calling the AuthService and includes comprehensive error handling.

​
Location

src/app/usuario/infrastructure/ui/pages/register-page/
├── register-page.ts
├── register-page.html
└── register-page.css

​
Component Code

import { Component } from '@angular/core';
import { AuthService } from '../../../services/auth-service';
import { catchError, tap, throwError } from 'rxjs';

@Component({
  selector: 'app-register-page',
  imports: [],
  templateUrl: './register-page.html',
  styleUrl: './register-page.css',
})
export class RegisterPage {

  constructor(private authService: AuthService) { }

  registrar(usuario: string, contrasena: string) {
    this.authService.registrarUsuario(usuario, contrasena).pipe(tap(usuario => {
      console.log('usuario', usuario);
      usuario ? alert('usuario registrado correctamente') : alert(usuario);
    }), catchError(err => {
      const mensaje = err.error ? err.error : 'Error desconocido';
      alert(`Error al registrar: ${mensaje}`);
      return throwError(() => err);
    })).subscribe();
  }
}

​
@Component Decorator

The component is configured with the following metadata:
PropertyValueDescription
selector'app-register-page'HTML selector for the component
imports[]Standalone component with no additional imports
templateUrl'./register-page.html'Path to the HTML template
styleUrl'./register-page.css'Path to the component styles

​
Properties

​
authService

private authService: AuthService
Injected instance of AuthService used to perform user registration operations.

​
Methods

​
registrar()

registrar(usuario: string, contrasena: string)
Registers a new user with the provided credentials. Parameters:
  • usuario (string) - Username for the new account
  • contrasena (string) - Password for the new account
RxJS Pipeline: The method uses RxJS operators to handle the registration flow with error handling:
  1. registrarUsuario() - Calls the service method that returns an Observable
  2. pipe() - Chains RxJS operators for data transformation and error handling
  3. tap() - Side effect operator that:
    • Logs the user object with label “usuario” to console
    • Displays success alert if registration succeeds
    • Displays the user object as alert if registration fails
  4. catchError() - Error handling operator that:
    • Extracts error message from error object
    • Displays formatted error alert
    • Re-throws the error using throwError()
  5. subscribe() - Activates the observable stream
Behavior:
  • On success: Displays “usuario registrado correctamente”
  • On failure: Displays error message in format “Error al registrar: ”
  • Logs: User object to console on successful registration
Error Handling: The method implements comprehensive error handling: 
catchError(err => {
  const mensaje = err.error ? err.error : 'Error desconocido';
  alert(`Error al registrar: ${mensaje}`);
  return throwError(() => err);
})
  • Checks if err.error exists, otherwise defaults to “Error desconocido”
  • Displays user-friendly error message
  • Re-throws error for potential upstream handling
Example: 
this.registrar('ivan', 'patatas123');

​
Dependency Injection

The component uses Angular’s dependency injection to inject the AuthService: 
constructor(private authService: AuthService) { }
This provides access to user registration methods in the infrastructure layer.

​
Routing Configuration

The RegisterPage is configured as the /registro route in app.routes.ts: 
export const routes: Routes = [
    {
        path: '',
        component: LoginPage
    },
    {
        path: 'registro',
        component: RegisterPage
    }
];
Route Details:
  • Path: /registro
  • Component: RegisterPage
  • Access: Navigate to /registro to access registration page

​
RxJS Operators Used

The component demonstrates several RxJS operators:

​
tap()

Used for side effects without modifying the stream:
  • Logging to console
  • Displaying alerts
  • Does not transform the observable data

​
catchError()

Handles errors in the observable stream:
  • Intercepts errors from the registration service
  • Displays user-friendly error messages
  • Can transform or re-throw errors

​
throwError()

Creates an error observable:
  • Re-throws the caught error
  • Allows error propagation to subscribers
  • Useful for maintaining error flow

​
Usage Notes

  • The component currently uses hardcoded credentials in the template for testing
  • Registration results are displayed using browser alerts
  • Unlike LoginPage, this component does NOT implement OnInit
  • Comprehensive error handling is implemented using RxJS catchError
  • The component follows Angular standalone component architecture
  • Error messages are extracted from the err.error property or default to “Error desconocido”

Build docs developers (and LLMs) love

Get started for freeTalk to us