🎓 Evaluación 2 — Angular Material, autenticación, rendimiento y despliegue

Curso Angular · 2026-08-17 · 14 preguntas de respuesta directa (sin alternativas) ⬅️ Volver al índice de evaluaciones

📋 Datos de la evaluación

Dato	Detalle
Fecha	2026-08-17
Modalidad	Teórica — 14 preguntas de respuesta directa (a diferencia de la Evaluación 1, esta no daba alternativas para elegir)
Temas que evaluó	Angular Material, autenticación con JWT (Guards, Interceptors, roles), rendimiento (trackBy, OnPush), build y despliegue (CI/CD)
Resultado	✅ 100/100

📝 La numeración original del examen salta de la 13 a la 15 — nunca hubo una pregunta N.° 14. Se conserva esa numeración tal como se rindió.

🗺️ Qué evaluó (mapa de temas)

Evaluación 2 (14 preguntas)
├── 🎨 Angular Material .......................... preguntas 1, 2, 3, 11
├── 🔐 Autenticación y seguridad (JWT) ........... preguntas 5, 6, 7, 8
├── ⚡ Diseño responsive y rendimiento ........... preguntas 4, 9, 10
└── 🚀 Build y despliegue (CI/CD) ................ preguntas 12, 13, 15

💡 Para re-rendir la evaluación: lee cada pregunta, escribe tu respuesta y recién ahí abre "Ver respuesta".

❓ Preguntas con solución

1. ¿Qué paquete se instala para agregar Angular Material a un proyecto?

Ver respuesta

npm install @angular/material. Angular Material es la librería oficial de componentes visuales para Angular. En la práctica es más frecuente usar el schematic, que instala y configura el proyecto en un solo paso:

ng add @angular/material

2. ¿Qué componente de Angular Material se usa para crear un panel lateral de navegación?

Ver respuesta

mat-sidenav. Crea menús o paneles laterales, junto con mat-sidenav-container y mat-sidenav-content:

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    Menú
  </mat-sidenav>

  <mat-sidenav-content>
    Contenido principal
  </mat-sidenav-content>
</mat-sidenav-container>

3. ¿Qué componente de Angular Material se utiliza para mostrar notificaciones breves y temporales al usuario?

Ver respuesta

mat-snackbar. Muestra avisos, confirmaciones o mensajes de error durante un tiempo determinado:

this.snackBar.open('Datos guardados correctamente', 'Cerrar', {
  duration: 3000
});

Otros componentes de Material que no son la respuesta pero conviene distinguir: mat-dialog (ventanas modales), mat-menu (menús desplegables), mat-table (tablas, ver pregunta 11).

4. ¿Qué característica de diseño permite que una aplicación se adapte correctamente a distintos tamaños de pantalla?

Ver respuesta

Diseño Responsive. Adapta la interfaz a celulares, tablets y computadoras.

Conceptos relacionados que suelen confundirse con esto (pero son de rendimiento, no de adaptación visual): Lazy Loading (carga recursos cuando se necesitan), Tree Shaking (elimina código no utilizado en la compilación) y Change Detection (actualiza la vista cuando cambian los datos).

5. En un login con JWT, ¿qué se almacena típicamente en el cliente para mantener la sesión del usuario?

Ver respuesta

El token JWT. Después del login, el backend entrega un token que el cliente reenvía en las solicitudes posteriores para identificarse:

Authorization: Bearer <token>

No se debe conservar la contraseña del usuario para mantener la sesión.

6. ¿Cuál es la función principal de un Guard de autenticación en Angular?

Ver respuesta

Prevenir el acceso a una ruta si el usuario no cumple ciertas condiciones, como estar autenticado:

canActivate(): boolean {
  if (this.authService.isAuthenticated()) {
    return true;
  }

  this.router.navigate(['/login']);
  return false;
}

Ya viste la base de esto (el servicio Auth con signal) en la Clase 9 — Routing avanzado, aunque ahí el guard en sí todavía estaba pendiente.

7. ¿Dónde se recomienda agregar el token JWT a las peticiones HTTP salientes de forma centralizada?

Ver respuesta

En un interceptor HTTP. Modifica las solicitudes antes de enviarlas al backend:

intercept(req: HttpRequest<any>, next: HttpHandler) {
  const token = localStorage.getItem('token');

  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${token}`
    }
  });

  return next.handle(authReq);
}

Ventaja principal: evita repetir la lógica del token en cada componente o servicio.

8. ¿Qué estrategia permite restringir el acceso a ciertas rutas o funcionalidades según el tipo de usuario?

Ver respuesta

Roles y permisos. Determinan qué acciones tiene habilitadas cada clase de usuario (ADMIN, EDITOR, USER, SUPERVISOR…):

if (user.role === 'ADMIN') {
  // permitir acceso
}

Los Guards también pueden validar roles antes de permitir el acceso a una ruta.

9. ¿Para qué se utiliza la propiedad trackBy dentro de un ngFor?

Ver respuesta

Para optimizar el renderizado evitando recrear elementos del DOM innecesariamente. Angular identifica cada elemento mediante un valor único:

trackById(index: number, item: Usuario) {
  return item.id;
}

<div *ngFor="let usuario of usuarios; trackBy: trackById">
  {{ usuario.nombre }}
</div>

Beneficio: Angular actualiza los elementos modificados en lugar de reconstruir toda la lista.

10. ¿Qué hace la estrategia ChangeDetectionStrategy.OnPush?

Ver respuesta

Optimiza el rendimiento verificando cambios principalmente cuando cambian las referencias de los @Input o se dispara un evento:

@Component({
  selector: 'app-usuario',
  templateUrl: './usuario.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsuarioComponent {
  @Input() usuario!: Usuario;
}

Idea principal: OnPush = menos verificaciones de cambios. Útil en aplicaciones con muchos componentes o estructuras grandes de datos.

11. En un dashboard administrativo, ¿qué elemento permite mostrar datos tabulares con opciones de orden y paginación?

Ver respuesta

mat-table. Angular Material integra varios elementos para trabajar con tablas: mat-table (la tabla), matSort (ordenamiento) y mat-paginator (paginación):

<table mat-table [dataSource]="dataSource" matSort>
  ...
</table>

<mat-paginator [pageSize]="10"></mat-paginator>

12. ¿Qué comando se utiliza para generar un build de producción en Angular?

Ver respuesta

ng build --configuration production

Compila la aplicación con la configuración de producción y genera los archivos que luego se publican en un servidor o plataforma de hosting.

Comandos relacionados que no son la respuesta: ng serve (levanta el servidor local de desarrollo), ng test (ejecuta pruebas), ng deploy (despliega cuando hay un mecanismo de deploy configurado).

13. ¿Qué característica principal ofrecen plataformas como Netlify y Vercel para el deploy de aplicaciones frontend?

Ver respuesta

Despliegue continuo, hosting y configuración de dominio de forma sencilla. Flujo frecuente:

Git Push → Repositorio → Build automático → Deploy

Facilitan: hosting frontend, integración con Git, builds automáticos, deploy continuo, gestión de dominios y HTTPS.

15. ¿Qué busca principalmente un pipeline de CI/CD en un proyecto Angular?

Ver respuesta

Automatizar procesos de integración, pruebas y despliegue del código. Flujo típico:

Commit → Build → Test → Deploy

• CI (Continuous Integration): integrar cambios de código frecuentemente y ejecutar validaciones automáticas (instalar dependencias, compilar, ejecutar pruebas, validar calidad del código).
• CD (Continuous Delivery/Deployment): automatiza la preparación o publicación de nuevas versiones de la aplicación.

🧠 Repaso — qué cubren mis apuntes y qué falta

Tema	Preguntas	¿Dónde repasarlo?
Angular Material (mat-sidenav, mat-snackbar, mat-table)	1-3, 11	Sin apunte propio aún — 🔜 pendiente (hay proyecto 02-Ejercicios/app-semana07)
JWT, token en el cliente	5	Sin apunte aún — 🔜 pendiente
Guard de autenticación	6	Clase 9 — Routing avanzado (servicio Auth, ng g guard; el canActivate en sí quedó pendiente ahí)
Interceptor HTTP para JWT	7	Sin apunte aún — 🔜 pendiente
Roles y permisos	8	Sin apunte aún — 🔜 pendiente
Diseño responsive	4	Sin apunte aún — 🔜 pendiente
trackBy en ngFor	9	Sin apunte aún — 🔜 pendiente
ChangeDetectionStrategy.OnPush	10	Sin apunte aún — 🔜 pendiente
Build de producción (ng build --configuration production)	12	Sin apunte aún — 🔜 pendiente
Netlify / Vercel / CI-CD	13, 15	Sin apunte aún — 🔜 pendiente

⚠️ Casi todos estos temas todavía no tienen clase propia en 01-Clases/ — el examen se adelantó al temario. Son buenos candidatos para las próximas clases documentadas.

🧪 Repaso desglosado (con conceptos relacionados y por qué se descartan) en Entrevistas.

📎 Apuntes relacionados

• Clase 9 — Routing avanzado (Guards)
• Evaluación 1 — Servicios, HTTP y RxJS
• Preguntas de entrevista