Primeros pasos¶

Debemos instalar nvm, node, y luego angular/cli de forma global debemos crear el proyecto usando ng

ng g c : path/nombre genera el componente
    usamos -s -t para decir que los styles y template son inline
ng s   : abre el servidor

El objetivo es estar dividiendo todo en componentes.

Para instalar bootstrap¶

npm i  --save bootstrap@latest

en angular.json colocar en styles: los valores del path del modulo
    en mi caso es 

Interpolador¶

EN resumen es inyectar texto dinámico en una plantilla HTML, haciendo uso de selectores como {{ }} lo que este entre las llaves es la variable o expresión lógica a inyectar.

Property Binding¶

usamos el atributo [], ejemplo colocar [disabled]=variable en ts"

Event binding¶

o colocamos entre () los valores del eventjo, ej. (click)="algo"

Two way binding¶

Hace que se comunique tanto hacia la plantilla como el componente, en angular viejo, se debria importar FormsModule, pero en la 18 creo que ya no es necesario, yo lo he importado como un standalone

Primer proyecto, hacer una caulcadora

![[Pasted image 20240918170731.png]]

Directivas¶

NgIf¶

Usamos la directiva @If para ponerlo de manera dinamica el mostrar o no mostrar alog. En versiones anteriores es con *ngIf

Igualmente, tenemos el @else o *else, si se le aplica el *ngIf="condition; else id", se le debe aplicar un #id al div con el que lo vamos a operar.

Ngfor

Usamos @for algo of algo o si es angular anterior, *ngFor let x...

Flujo de datos¶

podemos enviar datos y recibir con @Input y @Output antes del atributo

Podemos usar strictPropertyInitialization: false en el tsconfig.json si queremos que no nos obligue a colocar atributos al inicializar

Referencias locales¶

No usamos two way binding, es una alternativa. colocamos en el input el #ID y hacemos referencia a él de esa forma local mente con ID.

<input ... #input1 >
<input ... #input2 > 

...

<button ... (click) = "function(input1.value, input2.value)">...

Tambien podemos acceder a los valores locales sin llamarlos desde la función de llamado a @ViewChild en el archivo ts, en cuyo caso en el ts accederiamos de esta forma

@ViewChild('nombreRefInput') nombreInput: ElementRef | undefined;
@ViewChild('apellidoRefInput') apellidoInput: ElementRef | undefined;



// agregarPersona(nombre: string, appellido: string): void {
// this.guardarUsuario.emit(new Persona(nombre, appellido));
// }



agregarPersona(): void {
    this.guardarUsuario.emit(
    new Persona(
    this.nombreInput?.nativeElement.value,
    this.apellidoInput?.nativeElement.value
));}

Servicios¶

es una clase de TS que sirve para centralizar información entre componentes, no para almacenar datos. Este servicio debe ser inyectado, puede ser entre plataforma, componentes o algun nombre en especifio, si se coloca como root, se usará el mismo servicio en toda la app.

Data Services¶

Sirven para almacenar datos entre componentes y ser consumida por ellos.

Si queremos inyectar un servicio en otro, es importable poner el decorador @Injecatble()

Comunicacion en componentes¶

1. El servicio debe tener un EventEmiter
2. un componente debe invocar al servicio.elemento.emit
3. otro componente debe suscribirse al servicio
   1. service.ellemento.subscribe({data})

Behaviours para esperar al cambio en otro componente.¶

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MiServicio {
  private valorSubject = new BehaviorSubject<string>('valor inicial');
  public valor$ = this.valorSubject.asObservable();

  setValue(nuevoValor: string) {
    this.valorSubject.next(nuevoValor);  // Actualiza el valor y notifica a los suscriptores
  }
}

import { Component, OnInit } from '@angular/core';
import { MiServicio } from './mi-servicio.service';

@Component({
  selector: 'app-mi-componente',
  template: '<p>{{ valor }}</p>'
})
export class MiComponente implements OnInit {
  public valor: string;

  constructor(private miServicio: MiServicio) {}

  ngOnInit(): void {
    // Nos suscribimos al observable para recibir actualizaciones del valor
    this.miServicio.valor$.subscribe(nuevoValor => {
      this.valor = nuevoValor;
    });
  }
}

PIPES¶

Usamos pipes para dar formato a algun texto... simplemente importamos el Pipe y luego lo configuramos segun la ESTR:ESTR2 que se define en la documentacion

estructura

{{ value | currency : "GTQ" : "Q" : "1.0-2" }}

NgClass¶

usamos el selector [ngClass]="{class1:boolean_expression}

Formularios¶

ngModel y ngForm con el id #ID