Apuntes de Angular

Apariencia

🧩 Componente con datos + interpolación + ruta (ejemplo completo) ​

Flujo de punta a punta: crear un componente, darle datos, mostrarlos en la vista y abrirlo por una URL. (Hecho en clase con mi-componente.)

1️⃣ Generar el componente ​

bash
ng g c mi-componente

Crea src/app/mi-componente/ con .ts, .html, .scss, .spec.ts.

2️⃣ La clase con sus propiedades (mi-componente.ts) ​

ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-mi-componente',
  imports: [],
  templateUrl: './mi-componente.html',
  styleUrl: './mi-componente.scss',
})
export class MiComponente {
  // --- propiedades (datos) ---
  nombre: string = 'Leonardo';
  edad: number = 18;
  haceEjercicio: boolean = true;
  random: number | string = '';   // tipo unión: número o texto

  // --- método (acción) ---
  metodo(parame: string): string {
    console.log('hola' + parame);  // imprime en la consola del navegador
    return 'hola' + parame;        // devuelve un valor
  }
}

3️⃣ Mostrar los datos en la vista con interpolación (mi-componente.html) ​

html
<p>mi-componente works!</p>
hola
soy {{ nombre }} <br>
tengo {{ edad }} años.

➡️ Resultado en pantalla: soy Leonardo / tengo 18 años. Las {{ }} toman el valor de las propiedades de la clase. → ver interpolación en ../00-Notas/02-Conceptos.md.

4️⃣ Registrar el componente como ruta (app.routes.ts) ​

ts
import { Routes } from '@angular/router';
import { MiComponente } from './mi-componente/mi-componente';

export const routes: Routes = [
  {
    path: 'mi-componente',        // la URL: /mi-componente
    component: MiComponente,      // qué componente mostrar ahí
  },
];

➡️ Ahora al entrar a http://localhost:4200/mi-componente se muestra el componente (dentro del <router-outlet/> del app.html).

🔁 El flujo completo: generas el componente → le das datos en la clase → los muestras con {{ }} en su HTML → lo registras en app.routes.ts con un path → lo visitas por su URL.

⚠️ Recuerda: la ruta hay que declararla a mano (Angular NO rutea por carpetas). El import de MiComponente debe apuntar a la ruta correcta del archivo.