En este artículo te enseñaré a crear tu primer CRUD con Angular y TypeScript paso a paso, construyendo una aplicación completa que servirá como base para desarrollos más complejos. Esta es una de las formas más eficaces de afianzar conocimientos prácticos mientras aplicas teoría real.
Una app CRUD (Create, Read, Update, Delete) permite interactuar con datos, y es la estructura básica que utilizan la mayoría de aplicaciones web. Además, Angular y TypeScript son herramientas ideales para este propósito, ya que permiten organizar el código, escalarlo con facilidad y trabajar de forma segura gracias al tipado fuerte.
Si ya has leído mis artículos sobre cómo empezar con Angular desde cero o la introducción a TypeScript, esta guía es el siguiente paso ideal para ti.
¿Qué vamos a construir con este CRUD con Angular y TypeScript?
Vamos a desarrollar un gestor de usuarios muy sencillo pero completamente funcional. A través de una interfaz simple, el usuario podrá:
- Crear registros nuevos, utilizando un formulario validado. Esto nos permitirá manejar inputs controlados y gestionar el estado del formulario con Angular.
- Consultar todos los usuarios en una lista, consumiendo datos desde una API simulada. Esta sección estará conectada al servicio correspondiente.
- Editar registros existentes cargando los datos previamente. Implementaremos rutas con parámetros para identificar qué usuario debe actualizarse.
- Eliminar registros fácilmente con una función que comunica con el backend simulado. Mostraremos el cambio instantáneamente en la interfaz.
Este mini proyecto no solo es didáctico, sino que también representa un patrón que puedes repetir y escalar fácilmente en cualquier tipo de aplicación web.
Requisitos previos antes de empezar el CRUD con Angular y TypeScript
Antes de empezar, necesitas tener configurado un entorno de desarrollo adecuado. Asegúrate de haber instalado lo siguiente:
- Node.js, que será necesario para ejecutar el proyecto y dependencias.
- Angular CLI, la interfaz de línea de comandos que permite generar archivos y ejecutar servidores locales.
- Visual Studio Code, o cualquier editor moderno con soporte para Angular y TypeScript.
- JSON Server, para simular una API REST sin necesidad de backend real.
Además, es recomendable que tengas conocimientos básicos en Angular, como el uso de componentes, servicios, enrutamiento y formularios. Si no es tu caso, puedes consultar esta guía previa:
➡️ ¿Cómo empezar con Angular desde cero? Guía paso a paso para principiantes
Estructura del proyecto CRUD con Angular y TypeScript
Mantener una estructura de carpetas clara y modular es esencial. A continuación te muestro la propuesta para este proyecto:
src/
├── app/
│ ├── components/
│ │ ├── user-list/
│ │ ├── user-form/
│ ├── services/
│ │ └── user.service.ts
│ ├── models/
│ │ └── user.model.ts
│ ├── app-routing.module.ts
│ └── app.module.ts
Gracias a esta estructura podrás escalar el proyecto más adelante con facilidad, separando responsabilidades entre componentes, modelos, servicios y rutas.
Crear el proyecto y generar los componentes
En primer lugar, abrimos una terminal y ejecutamos los comandos necesarios para crear el proyecto base:
ng new angular-crud
cd angular-crud
Una vez dentro, generamos los componentes necesarios para la lista y el formulario:
ng generate component components/user-list
ng generate component components/user-form
ng generate service services/user
Con esto, tendrás todos los archivos esenciales listos para comenzar a desarrollar funcionalidad real.
Crear el modelo de usuario en TypeScript
En el archivo user.model.ts, declaramos una interfaz para estructurar nuestros datos. Esto nos permite asegurar que cualquier operación que involucre usuarios respete una forma específica.
export interface User {
id: number;
name: string;
email: string;
}
Este tipo de definiciones es fundamental cuando trabajamos con programación orientada a objetos en TypeScript, como explico en este artículo:
➡️ Programación orientada a objetos con TypeScript
Simular una API con JSON Server
En lugar de montar un backend completo, vamos a usar JSON Server, que permite tener una API funcional con pocos pasos. En primer lugar:
- Creamos un archivo
db.jsoncon el contenido inicial:
{
"users": [
{ "id": 1, "name": "Laura", "email": "laura@mail.com" }
]
}
- Luego ejecutamos:
json-server --watch db.json
Esto expondrá una API REST en http://localhost:3000/users, lista para ser consumida desde Angular.
CRUD con Angular y TypeScript: servicio para consumir la API
En user.service.ts implementamos las funciones esenciales para comunicarnos con la API:
@Injectable({ providedIn: 'root' })
export class UserService {
private apiUrl = 'http://localhost:3000/users';
constructor(private http: HttpClient) {}
getUsers(): Observable<User[]> { ... }
createUser(user: User): Observable<User> { ... }
updateUser(user: User): Observable<User> { ... }
deleteUser(id: number): Observable<void> { ... }
}
Este servicio concentra toda la lógica de comunicación, por lo que nuestros componentes solo se enfocarán en la presentación y gestión del estado.
Formulario reactivo para crear o editar usuarios
Usamos formularios reactivos, una de las prácticas más potentes en Angular para gestionar inputs:
this.userForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
Y en la plantilla:
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<input formControlName="name">
<input formControlName="email">
<button type="submit">Guardar</button>
</form>
Angular permite un control completo del formulario, sus validaciones y el estado general. Si deseas profundizar, puedes revisar la documentación oficial de formularios reactivos para ver ejemplos más complejos.
Mostrar la lista de usuarios y gestionar acciones
En el componente user-list, cargamos los datos y mostramos opciones de edición y eliminación:
this.userService.getUsers().subscribe((data) => {
this.users = data;
});
Y en el HTML:
<li *ngFor="let user of users">
{{ user.name }} - {{ user.email }}
<button (click)="edit(user)">Editar</button>
<button (click)="delete(user.id)">Eliminar</button>
</li>
Esto crea una interfaz funcional y dinámica, que se actualiza cada vez que se modifica el estado de los datos.
Configurar rutas para navegar en el CRUD con Angular y TypeScript
Con Angular Router podemos crear navegación sin recargas entre componentes:
const routes: Routes = [
{ path: '', component: UserListComponent },
{ path: 'new', component: UserFormComponent },
{ path: 'edit/:id', component: UserFormComponent },
];
Gracias a esto, nuestra app se comportará como una SPA moderna y ágil.
Consejos para escalar tu CRUD con Angular y TypeScript
A medida que crezca tu proyecto, te recomiendo:
- Separar formularios complejos en subcomponentes reutilizables.
- Centralizar constantes y enums en archivos dedicados para evitar errores.
- Aplicar Lazy Loading en rutas si manejas grandes cantidades de vistas.
- Implementar interceptores para gestionar errores o inyectar headers automáticamente.
Estos pasos te permitirán construir aplicaciones profesionales sin complicarte demasiado.
Conclusión: haz tu primer CRUD con Angular y TypeScript y sigue avanzando
Construir un CRUD con Angular y TypeScript es una excelente manera de unir conocimientos teóricos con habilidades prácticas. A través de este tipo de proyectos, no solo desarrollas tu lógica de programación, sino también aprendes a trabajar con servicios, formularios, enrutamiento y buenas prácticas.
Además, este ejemplo puede servir como base para múltiples proyectos reales: desde un blog hasta una agenda de contactos o un catálogo de productos.
💬 Si te gustaría que desarrollemos juntos otro ejemplo similar —como una app de tareas, una lista de compras o incluso un sistema de reservas básico— déjalo en los comentarios del blog. ¡Estoy abierto a sugerencias para nuevos proyectos prácticos que te ayuden a seguir creciendo como desarrollador!
