DEV Community: Oscar D. Melo Ch.

Observables Angular Jxjs

Oscar D. Melo Ch. — Fri, 21 Apr 2023 22:30:42 +0000

Un objeto observable es aquel en el cual los cambios realizados pueden estar siendo monitoreados en tiempo real y Asíncrono, dado que el programa sigue ejecutándose a la espera de cambios en el objeto que esta siendo observado.
Por otra parte los objetos son monitoreados por los observadores, estos observadores pueden llevar código el cual se ejecutara dependiendo los requerimientos. El objeto observable puede estar siendo observado por uno o mas observadores, los cuales antes se deben suscribir.

Pasos para crear un objeto observable.

importamos la clase "observable" y y la función "of" de rxjs

import {Observable} from 'rxjs';
import {of} from 'rxjs';

Creamos un metodo para acceder al objeto. Este metodo retorna el observable en Stream() y se le debe especificar el objeto que se desea observar.

  getClientes():Observable<Cliente[]>{
    return of(CLIENTES);
  }

Pasos para un que un observador se suscriba al observable.

Acceder al método
Al ser un observable, podemos acceder al método subscribe.
En una función, recibir el dato y escribir el código según las necesidades. (usar la función flecha).

clientes.getClientes().subscribe(
           (clientes) => {
                return (/*code*/);
           }
        );

Servicio en angular

Oscar D. Melo Ch. — Fri, 21 Apr 2023 17:54:38 +0000

La creación de servicios hace parte de la lógica de negocios. en Angular un servicio de la clase service se crea de la siguiente manera: -ng generate service nombre_del_servicio-. Estos servicios son inyectables y se decoran con @injectable.
Se conectan con el controlador del componente y la estructura Nombre_del_componenteSerice, el cual se debe importar.
El servicio debe ser importado en los modulos y declarado como proveedor. "providers".

@Injectable({
  providedIn: 'root'
})
export class ClienteService {

  clientes:Cliente[];

  getClientes():Cliente[]{
    return this.clientes = CLIENTES;
  }

  constructor() { }
}

Directivas ngFor, ngIf.

Oscar D. Melo Ch. — Wed, 19 Apr 2023 20:47:57 +0000

En angular existe directivas estructurales que modifican el DOM segun las condiciones y variables de todo tipo, incluyendo arreglos. Estas directivas son *ngFor, *ngIf.
Ejemplo:

<li *ngFor = "let numeros of ArrayNumeros">numeros</li>

Aquí se crean tantos items para mostar en el DOM como los elementos existentes en el arreglo: ArrayNumeros.
otra opcion posible es mostrar o no algún bloque con *ngIf.
*ngIf="true".