Componentes en Angular

En el apartado anterior de la instalación vimos un primer acercamiento al nuestro componente principal app.component.

Pero ahora crearemos nuestros propios componentes de acuerdo para lo que se requiera.

Consumir APIS de la aplicación Cliente

Para consumir las apis es necesario tener en pleno funcionamiento el CRUD en el Backend. Adicionalmente en ese Backend debemos haber configurado el CORS y tener levantado el servidor en el puerto correspondiente.

Caso Nosde JS

Probamos cada unos de los métodos del CRUD, que en este caso utilizamos la librería, Thunder Client, pero también podrían utilizar otro cunsumidor de pruebas de Apis como Postman o cualquier otro de su preferencia.

Caso Django Rest Framework

Para ambos casos es importante saber la ruta, el puerto y en general cada uno de los end point para consumir las apis como veremos a continuación.

Resumen de Peticiones

Métodos	URL	Comportamiento
Get	localhost:8000/clientes	Mostrar todos los Clientes
Get	localhost:8000/clientes/9	Mostrar un cliente
POST	localhost:8000/clientes/	Crear un Cliente
PATCH	localhost:8000/clientes/12	Actualiza un Cliente
DELETE	localhost:8000/clientes/12	Elimina un Cliente

Para llevar esto a Cabo recuerde que en el Proyecto de Django debe instalar un paquete llamado CORS, que es el encargado de permitir solicitudes a nuestra aplicación Django desde otros orígenes.

CORS en el BackEnd de Django

http://190.131.213.204:9090/site/backend/Django/cors/

CORS en el BackEnd de NodeJs

http://190.131.213.204:9090/site/backend/NodeJs/cors_nodejs/

Crear servicio de datos para la aplicación de Clientes

Este servicio utilizará Angular HTTPClientpara enviar solicitudes HTTP.\ Puede ver que sus funciones incluyen operaciones CRUD y método de búsqueda.

Se crea un archivo que representa el modelo de Cliente

src/app/models/cliente.ts

export interface ClienteI {
    id?: number;
    nombre: string
    direccion: string
    telefono: string
    correo: string
    password: string

}

Para crear un servicio en la terminal de VS Code

ng g s services/cliente

Se crean automaticamente los archivos

Componentes CRUD Clientes

En el Servicio

En el archivo creado para el servicio en NodeJS

src/app/services/cliente.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ClienteI } from '../models/cliente';

@Injectable({
  providedIn: 'root'
})
export class ClienteService {
  api_uri_node = 'http://localhost:5000';
  base_path = `${this.api_uri_node}/clientes`

  constructor(
    private http:HttpClient
  ) { }

  getAllCliente():Observable<{cliente:ClienteI[]}>{
    return this.http
      .get<{cliente:ClienteI[]}>(this.base_path)
  }

  getOneCliente(id: number):Observable<{cliente:ClienteI[]}>{
    return this.http
      .get<{cliente:ClienteI[]}>(`${this.base_path}/${id}`)
  }



  createCliente(data: any):Observable<ClienteI>{
    return this.http.post<ClienteI>(this.base_path, data)
  }

  updateCliente(id: number, data: any): Observable<ClienteI> {
    return this.http.put<ClienteI>(`${this.base_path}/${id}`, data);
  }

  deleteCliente(id: number): Observable<ClienteI> {
    return this.http.delete<ClienteI>(`${this.base_path}/eliminar1/${id}`);
  }
}

En el archivo creado para el servicio en Django Rest Framework

src/app/services/cliente.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ClienteI } from '../models/cliente';

@Injectable({
  providedIn: 'root'
})
export class ClienteService {
  api_uri_django = 'http://localhost:8000';
  base_path = `${this.api_uri_django}/clientes/`

  constructor(
    private http:HttpClient
  ) { }

  getAllCliente():Observable<ClienteI[]>{
    return this.http
      .get<ClienteI[]>(this.base_path)
  }

  getOneCliente(id: number):Observable<ClienteI>{
    return this.http
      .get<ClienteI>(`${this.base_path}${id}`)
  }



  createCliente(data: any):Observable<ClienteI>{
    return this.http.post<ClienteI>(this.base_path, data)
  }

  updateCliente(id: number, data: any): Observable<ClienteI> {
    return this.http.put<ClienteI>(`${this.base_path}${id}`, data);
  }

  deleteCliente(id: number): Observable<ClienteI> {
    return this.http.delete<ClienteI>(`${this.base_path}${id}`);
  }
}

En el Componente Mostrar y Eliminar Cliente

En NodeJS

src/app/components/cliente/mostrar-cliente/mostrar-cliente.component.ts

import { Component, OnInit } from '@angular/core';
import { ClienteI } from '../../../models/cliente';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { CardModule } from 'primeng/card';
import { ClienteService } from '../../../services/cliente.service'

@Component({
  selector: 'app-mostrar-cliente',
  standalone: true,
  imports: [TableModule, ButtonModule, CardModule, RouterModule],
  templateUrl: './mostrar-cliente.component.html',
  styleUrl: './mostrar-cliente.component.css'
})
export class MostrarClienteComponent implements OnInit{
  public clientes:ClienteI[] = []
  constructor(
    private clienteService: ClienteService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.mostrarClientes()
  }

  mostrarClientes() {
    this.clienteService.getAllCliente()
      .subscribe({
        next: (data) => {
          this.clientes = data.cliente
          // console.log(this.clientes)
        }
      })
  }


  eliminar(id: number): void{
    this.router.navigateByUrl('/clientes');
    this.clienteService.deleteCliente(id).subscribe(
      () => {
        // this.messageService.add({severity:'warn', summary: 'Notificación', detail: 'Cliente Eliminado', life:5000});
        this.mostrarClientes();
      },
      err => {
        console.log('error')
        this.router.navigateByUrl('/clientes');

      }
    );
  }
}

En Django Rest Framework

src/app/components/cliente/mostrar-cliente/mostrar-cliente.component.ts

import { Component, OnInit } from '@angular/core';
import { ClienteI } from '../../../models/cliente';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { CardModule } from 'primeng/card';
import { ClienteService } from '../../../services/cliente.service'

@Component({
  selector: 'app-mostrar-cliente',
  standalone: true,
  imports: [TableModule, ButtonModule, CardModule, RouterModule],
  templateUrl: './mostrar-cliente.component.html',
  styleUrl: './mostrar-cliente.component.css'
})
export class MostrarClienteComponent implements OnInit{
  public clientes:ClienteI[] = []
  constructor(
    private clienteService: ClienteService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.mostrarClientes()
  }

  mostrarClientes() {
    this.clienteService.getAllCliente()
      .subscribe({
        next: (data) => {
          this.clientes = data
          // console.log(this.clientes)
        }
      })
  }


  eliminar(id: number): void{
    this.router.navigateByUrl('/clientes');
    this.clienteService.deleteCliente(id).subscribe(
      () => {
        // this.messageService.add({severity:'warn', summary: 'Notificación', detail: 'Cliente Eliminado', life:5000});
        this.mostrarClientes();
      },
      err => {
        console.log('error')
        this.router.navigateByUrl('/clientes');

      }
    );
  }
}

Ya estamos accediendo a la información del Backend.

Para culminar el proceso nos dirigimos a:

Nota: Tanto en NodeJS como en Django Rest Framework El codigo es el mismo para ambos frameworks

src/app/components/cliente/mostrar-cliente/mostrar-cliente.component.html

<p-card class="w-12 h-full">
    <ng-template pTemplate="header">

        <div class="flex justify-content-between flex-wrap">
            <h3 class="ml-4">
                Registro de Clientes
            </h3>
            <div class="mt-2 mr-2">
                <a 
                  pButton 
                  pRipple
                  label="Crear Clientes" 
                  icon="pi pi-user-plus"
                  class="bg-cyan-600"
                  [routerLink]="['/clientes/nuevo']">
                </a>


            </div>

        </div>
    </ng-template>
    <p>
        <p-table [value]="clientes">
            <ng-template pTemplate="header">
                <tr>
                    <th>Nombre</th>
                    <th>Direccion</th>
                    <th>Telefono</th>
                    <th>Correo</th>
                    <th class="flex justify-content-center flex-wrap">Acciones</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-clientes>
                <tr>
                    <td>{{ clientes.nombre }}</td>
                    <td>{{ clientes.direccion }}</td>
                    <td>{{ clientes.telefono }}</td>
                    <td>{{ clientes.correo }}</td>
                    <td>
                        <button 
                        pButton 
                            pRipple
                            icon="pi pi-print"
                            class="bg-cyan-600  mr-1"
                        >

                        </button>
                        <a 
                            pButton 
                            pRipple
                            icon="pi pi-sync"
                            severity="warning"
                            class="mr-1"
                            [routerLink]="['/clientes/edit', clientes.id]">
                        </a>

                        <button 
                            pButton 
                            pRipple
                            severity="danger"
                            icon="pi pi-eraser"
                            class="mr-1"
                            (click)="eliminar(clientes.id)"
                        >

                        </button>
                    </td>

                </tr>
            </ng-template>
        </p-table>
    </p>

</p-card>

Ya podemos ver la información proveniente del BackEnd

Ahora, si presionamos el botón Crear Clientes, muestra el componente Crear Clientes.

Lo que quiere decir que podemos dirigirnos al componente Crear Clientes en el archivo .html y crear el formulario para crear los clientes.

En el Componente Crear Cliente

En NodeJS

src/app/components/cliente/crear-cliente/crear-cliente.component.ts

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClienteService } from '../../../services/cliente.service';
import { MessageService } from 'primeng/api';
import { Router } from '@angular/router';
import { ClienteI } from '../../../models/cliente';
import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';

import { ReactiveFormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import {ToastModule} from 'primeng/toast';

@Component({
  selector: 'app-crear-cliente',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, ToastModule, CardModule, ButtonModule],
  templateUrl: './crear-cliente.component.html',
  styleUrl: './crear-cliente.component.css'
})
export class CrearClienteComponent implements OnInit{

  public form:FormGroup=this.formBuilder.group({
    nombre: ['', [Validators.required]],
    direccion: ['', [Validators.required]],
    telefono: ['', [Validators.required]],
    correo: ['', [Validators.required]],
    password: ['', [Validators.required]],

  });

  clienteService = inject(ClienteService);
  constructor(
    private formBuilder: FormBuilder,
    // private clienteService: ClienteService,
    // private messageService: MessageService,

    private router: Router,
  ) { }

  ngOnInit(): void {

  }

  onSubmit(): void {
    const formValue: ClienteI = this.form.value;
    console.log(formValue);
    this.clienteService.createCliente(formValue).subscribe(
      () => {
        // console.log('Se ha creado correctamente');

    //     setTimeout(()=>{                  
    //       this.messageService.add({severity:'success', summary: 'Notificación', detail: 'Cliente Creado', life:5000});

    //  }, 0);
    console.log(formValue)
        this.router.navigateByUrl('clientes');

      },
      err => {

        console.log(err);
        console.log('No se ha creado correctamente');
      }
    );
  }

  cancel() {
    this.router.navigateByUrl('/clientes');
  }

  get nombre() { return this.form.get('nombreCliente'); }

  get direccion() { return this.form.get('direccionCliente'); }
  get telefono() { return this.form.get('telefonoCliente'); }
  get correo() { return this.form.get('correoCliente'); }
  get password() { return this.form.get('passwordCliente'); }

}

En el Componente Crear Cliente

En NodeJS

En el src/app/components/cliente/crear-cliente/crear-cliente.component.html

<p-card header="Crear Clientes"  [style]="{ width: '100%' }">
    <ng-template pTemplate="header">

    </ng-template>
    <div>
      <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()" class="p-3 bg-faded">


        <div class="grid">
          <div class="col-12 sm:col-6">
              <div class="p-inputgroup mb-1">
                  <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="nombre" placeholder="nombreCliente"  title="nombreCliente">         
              </div>
          </div>

          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
                  <span class="p-inputgroup-addon"><i class="pi pi-wallet"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="direccion" placeholder="direccionCliente" title="direccionCliente" >          
            </div>
          </div>

        </div>

        <div class="grid">
          <div class="col-12 sm:col-6">
              <div class="p-inputgroup mb-1">
                  <span class="p-inputgroup-addon"><i class="pi pi-phone"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="telefono" placeholder="telefonoCliente"  title="telefonoCliente">         
              </div>
          </div>

          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
                  <span class="p-inputgroup-addon"><i class="pi pi-bookmark"></i></span>
                  <input class="w-12" type="email" pInputText formControlName="correo" placeholder="correoCliente" title="correoCliente" >          
            </div>
          </div>



        </div>

        <div class="grid">
          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
              <span class="p-inputgroup-addon"><i class="pi pi-comments"></i></span>
              <input class="w-12" type="password" pInputText formControlName="password" placeholder="passwordCliente" title="passwordCliente" >          
          </div>
          </div>
        </div>

        <div class="flex justify-content-center flex-wrap">
          <button 
                      pButton 
                      pRipple
                      label="Guardar"
                      icon="pi pi-save"
                      severity="info"
                      class="mr-4"
                      type="submit"
          ></button>

          <button 
                      pButton 
                      pRipple
                      label="Cancelar"
                      icon="pi pi-times-circle"
                      severity="warning"
                      class="mr-4"
                      type="button"
                      (click)="cancel()"
          ></button>
        </div>


    </form> 

    </div>
    <ng-template pTemplate="footer">

    </ng-template>
  </p-card>

____________________________________________________________________________________________________________

En el Componente Crear Cliente

En Django Rest Framework

src/app/components/cliente/crear-cliente/crear-cliente.component.ts

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClienteService } from '../../../services/cliente.service';
import { MessageService } from 'primeng/api';
import { Router } from '@angular/router';
import { ClienteI } from '../../../models/cliente';
import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';

import { ReactiveFormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import {ToastModule} from 'primeng/toast';

@Component({
  selector: 'app-crear-cliente',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, ToastModule, CardModule, ButtonModule],
  templateUrl: './crear-cliente.component.html',
  styleUrl: './crear-cliente.component.css'
})
export class CrearClienteComponent implements OnInit{

  public form:FormGroup=this.formBuilder.group({
    nombre: ['', [Validators.required]],
    direccion: ['', [Validators.required]],
    telefono: ['', [Validators.required]],
    correo: ['', [Validators.required]],
    password: ['', [Validators.required]],

  });

  clienteService = inject(ClienteService);
  constructor(
    private formBuilder: FormBuilder,
    // private clienteService: ClienteService,
    // private messageService: MessageService,

    private router: Router,
  ) { }

  ngOnInit(): void {

  }

  onSubmit(): void {
    const formValue: ClienteI = this.form.value;
    console.log(formValue);
    this.clienteService.createCliente(formValue).subscribe(
      () => {
        // console.log('Se ha creado correctamente');

    //     setTimeout(()=>{                  
    //       this.messageService.add({severity:'success', summary: 'Notificación', detail: 'Cliente Creado', life:5000});

    //  }, 0);
    console.log(formValue)
        this.router.navigateByUrl('clientes');

      },
      err => {

        console.log(err);
        console.log('No se ha creado correctamente');
      }
    );
  }

  cancel() {
    this.router.navigateByUrl('/clientes');
  }

  get nombre() { return this.form.get('nombreCliente'); }

  get direccion() { return this.form.get('direccionCliente'); }
  get telefono() { return this.form.get('telefonoCliente'); }
  get correo() { return this.form.get('correoCliente'); }
  get password() { return this.form.get('passwordCliente'); }

}

En el Componente Crear Cliente

En Django Rest Framework

En el src/app/components/cliente/crear-cliente/crear-cliente.component.html

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClienteService } from '../../../services/cliente.service';
import { MessageService } from 'primeng/api';

import { Router } from '@angular/router';
import { ClienteI } from '../../../models/cliente';
import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';

import { ReactiveFormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import {ToastModule} from 'primeng/toast';
@Component({
  selector: 'app-crear-cliente',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, ToastModule, CardModule, ButtonModule],
  templateUrl: './crear-cliente.component.html',
  styleUrl: './crear-cliente.component.css'
})
export class CrearClienteComponent implements OnInit{
  public form:FormGroup=this.formBuilder.group({
    nombre: ['', [Validators.required]],
    direccion: ['', [Validators.required]],
    telefono: ['', [Validators.required]],
    correo: ['', [Validators.required]],
    password: ['', [Validators.required]],

  });

  clienteService = inject(ClienteService);
  constructor(
    private formBuilder: FormBuilder,
    // private clienteService: ClienteService,
    private messageService: MessageService,

    private router: Router,
  ) { }

  ngOnInit(): void {

  }

  onSubmit(): void {
    const formValue: ClienteI = this.form.value;
    console.log(formValue);
    this.clienteService.createCliente(formValue).subscribe(
      () => {
        // console.log('Se ha creado correctamente');

        setTimeout(()=>{                  
          this.messageService.add({severity:'success', summary: 'Notificación', detail: 'Cliente Creado', life:5000});

     }, 0);
    console.log(formValue)
        this.router.navigateByUrl('clientes');

      },
      err => {

        console.log(err);
        console.log('No se ha creado correctamente');
      }
    );
  }

  cancel() {
    this.router.navigateByUrl('/clientes');
  }

  get nombre() { return this.form.get('nombreCliente'); }

  get direccion() { return this.form.get('direccionCliente'); }
  get telefono() { return this.form.get('telefonoCliente'); }
  get correo() { return this.form.get('correoCliente'); }
  get password() { return this.form.get('passwordCliente'); }
}

y vamos al navegador http://localhost:4200

En el Componente Actualizar Cliente

En NodeJS

src/app/components/cliente/actualizar-cliente/actualizar-cliente.component.ts

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ActivatedRoute, Router } from '@angular/router';
import { ClienteService } from '../../../services/cliente.service';
import { ClienteI } from '../../../models/cliente';
import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';
import { ReactiveFormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-actualizar-cliente',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, CardModule, ButtonModule],
  templateUrl: './actualizar-cliente.component.html',
  styleUrl: './actualizar-cliente.component.css'
})
export class ActualizarClienteComponent implements OnInit{
  public id: number =0;
  public form:FormGroup=this.formBuilder.group({
    id: [''],
    nombre: ['', [Validators.required]],
    direccion: ['', [Validators.required]],
    telefono: ['', [Validators.required]],
    correo: ['', [Validators.required]],
    password: ['', [Validators.required]],

  });
  clienteService = inject(ClienteService);
  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    this.id = this.route.snapshot.params['id'];
    // let idCliente = this.route.snapshot.paramMap.get("id");
    this.getCliente(this.id);

  }

  getCliente(id: number){
    this.clienteService.getOneCliente(id)
    .subscribe({
      next: (data) => {
        this.form.setValue(data.cliente)
        // console.log(data.cliente)
      }
    })
  }


  onSubmit(): void {
    const formValue: ClienteI = this.form.value;
    const id: number =  this.form.value.id
    this.clienteService.updateCliente(id, formValue).subscribe(
      () => {
        // console.log('Se ha creado correctamente');
    //     setTimeout(()=>{                  
    //       this.messageService.add({severity:'success', summary: 'Notificación', detail: 'Cliente Actualizado', life:5000});

    //  }, 0);
        this.router.navigateByUrl('clientes');

      },
      err => {

        console.log(err);
        console.log('No se ha creado correctamente');
      }
    );
  }

  cancel() {
    this.router.navigateByUrl('/clientes');
  }

  get nombre() { return this.form.get('nombre'); }

  get direccion() { return this.form.get('direccione'); }
  get telefono() { return this.form.get('telefono'); }
  get correo() { return this.form.get('correo'); }
  get password() { return this.form.get('password'); }
}

En NodeJS

src/app/components/cliente/actualizar-cliente/actualizar-cliente.component.html

<p-card header="Crear Clientes"  [style]="{ width: '100%' }">
    <ng-template pTemplate="header">

    </ng-template>
    <div>
      <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()" class="p-3 bg-faded">


        <div class="grid">
          <div class="col-12 sm:col-6">
              <div class="p-inputgroup mb-1">
                  <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="nombre" placeholder="nombreCliente"  title="nombreCliente">         
              </div>
          </div>

          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
                  <span class="p-inputgroup-addon"><i class="pi pi-wallet"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="direccion" placeholder="direccionCliente" title="direccionCliente" >          
            </div>
          </div>

        </div>

        <div class="grid">
          <div class="col-12 sm:col-6">
              <div class="p-inputgroup mb-1">
                  <span class="p-inputgroup-addon"><i class="pi pi-phone"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="telefono" placeholder="telefonoCliente"  title="telefonoCliente">         
              </div>
          </div>

          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
                  <span class="p-inputgroup-addon"><i class="pi pi-bookmark"></i></span>
                  <input class="w-12" type="email" pInputText formControlName="correo" placeholder="correoCliente" title="correoCliente" >          
            </div>
          </div>



        </div>

        <div class="grid">
          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
              <span class="p-inputgroup-addon"><i class="pi pi-comments"></i></span>
              <input class="w-12" type="password" pInputText formControlName="password" placeholder="passwordCliente" title="passwordCliente" >          
          </div>
          </div>
        </div>

        <div class="flex justify-content-center flex-wrap">
          <button 
                      pButton 
                      pRipple
                      label="Actualizar"
                      icon="pi pi-save"
                      severity="info"
                      class="mr-4"
                      type="submit"
          ></button>

          <button 
                      pButton 
                      pRipple
                      label="Actualizar"
                      icon="pi pi-times-circle"
                      severity="warning"
                      class="mr-4"
                      type="button"
                      (click)="cancel()"
          ></button>
        </div>


    </form> 

    </div>
    <ng-template pTemplate="footer">

    </ng-template>
  </p-card>

En el Componente Actualizar Cliente

En Django Rest Framework

src/app/components/cliente/actualizar-cliente/actualizar-cliente.component.ts

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ActivatedRoute, Router } from '@angular/router';
import { ClienteService } from '../../../services/cliente.service';
import { ClienteI } from '../../../models/cliente';
import { CardModule } from 'primeng/card';
import { ButtonModule } from 'primeng/button';
import { ReactiveFormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-actualizar-cliente',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, CardModule, ButtonModule],
  templateUrl: './actualizar-cliente.component.html',
  styleUrl: './actualizar-cliente.component.css'
})
export class ActualizarClienteComponent implements OnInit{
  public id: number =0;
  public form:FormGroup=this.formBuilder.group({
    id: [''],
    nombre: ['', [Validators.required]],
    direccion: ['', [Validators.required]],
    telefono: ['', [Validators.required]],
    correo: ['', [Validators.required]],
    password: ['', [Validators.required]],

  });
  clienteService = inject(ClienteService);
  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    this.id = this.route.snapshot.params['id'];
    // let idCliente = this.route.snapshot.paramMap.get("id");
    this.getCliente(this.id);

  }

  getCliente(id: number){
    this.clienteService.getOneCliente(id)
    .subscribe({
      next: (data) => {
        this.form.setValue(data)
        // console.log(data.cliente)
      }
    })
  }


  onSubmit(): void {
    const formValue: ClienteI = this.form.value;
    const id: number =  this.form.value.id
    this.clienteService.updateCliente(id, formValue).subscribe(
      () => {
        // console.log('Se ha creado correctamente');
    //     setTimeout(()=>{                  
    //       this.messageService.add({severity:'success', summary: 'Notificación', detail: 'Cliente Actualizado', life:5000});

    //  }, 0);
        this.router.navigateByUrl('clientes');

      },
      err => {

        console.log(err);
        console.log('No se ha creado correctamente');
      }
    );
  }

  cancel() {
    this.router.navigateByUrl('/clientes');
  }

  get nombre() { return this.form.get('nombre'); }

  get direccion() { return this.form.get('direccione'); }
  get telefono() { return this.form.get('telefono'); }
  get correo() { return this.form.get('correo'); }
  get password() { return this.form.get('password'); }
}

En Django Rest Framework

src/app/components/cliente/actualizar-cliente/actualizar-cliente.component.html

<p-card header="Crear Clientes"  [style]="{ width: '100%' }">
    <ng-template pTemplate="header">

    </ng-template>
    <div>
      <form [formGroup]="form" novalidate (ngSubmit)="onSubmit()" class="p-3 bg-faded">


        <div class="grid">
          <div class="col-12 sm:col-6">
              <div class="p-inputgroup mb-1">
                  <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="nombre" placeholder="nombreCliente"  title="nombreCliente">         
              </div>
          </div>

          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
                  <span class="p-inputgroup-addon"><i class="pi pi-wallet"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="direccion" placeholder="direccionCliente" title="direccionCliente" >          
            </div>
          </div>

        </div>

        <div class="grid">
          <div class="col-12 sm:col-6">
              <div class="p-inputgroup mb-1">
                  <span class="p-inputgroup-addon"><i class="pi pi-phone"></i></span>
                  <input class="w-12" type="text" pInputText formControlName="telefono" placeholder="telefonoCliente"  title="telefonoCliente">         
              </div>
          </div>

          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
                  <span class="p-inputgroup-addon"><i class="pi pi-bookmark"></i></span>
                  <input class="w-12" type="email" pInputText formControlName="correo" placeholder="correoCliente" title="correoCliente" >          
            </div>
          </div>



        </div>

        <div class="grid">
          <div class="col-12 sm:col-6">
            <div class="p-inputgroup mb-1 ">
              <span class="p-inputgroup-addon"><i class="pi pi-comments"></i></span>
              <input class="w-12" type="password" pInputText formControlName="password" placeholder="passwordCliente" title="passwordCliente" >          
          </div>
          </div>
        </div>

        <div class="flex justify-content-center flex-wrap">
          <button 
                      pButton 
                      pRipple
                      label="Actualizar"
                      icon="pi pi-save"
                      severity="info"
                      class="mr-4"
                      type="submit"
          ></button>

          <button 
                      pButton 
                      pRipple
                      label="Actualizar"
                      icon="pi pi-times-circle"
                      severity="warning"
                      class="mr-4"
                      type="button"
                      (click)="cancel()"
          ></button>
        </div>


    </form> 

    </div>
    <ng-template pTemplate="footer">

    </ng-template>
  </p-card>