App de Listado basico Angular9

app.component.ts

export class AppComponent {

  title = 'proyecto002 - listado de frutas';

  art={

    codigo:null,

    descripcion:null,

    precio:null }

  articulos = [{codigo:1, descripcion:'papas', precio:'10.50'},

               {codigo:2, descripcion:'manzanas', precio:'20.50'},

               {codigo:3, descripcion:'melon', precio:'50'},

               {codigo:4, descripcion:'cebollas', precio:'17'},

               {codigo:5, descripcion:'calabaza', precio:'20'},

              ];

  hayRegistros(){

    return this.articulos.length>0; }

  borrar(art) {

    for(let x=0;x<this.articulos.length;x++)

    if (this.articulos[x].codigo==art.codigo)

    {

      this.articulos.splice(x,1);

      return;

    } }

  agregar(){

    for(let x=0;x<this.articulos.length;x++)

    if (this.articulos[x].codigo==this.art.codigo)

    {  alert('ya existe un articulo con ese codigo');

      return; }

    this.articulos.push({codigo:this.art.codigo,

                         descripcion:this.art.descripcion,

                         precio:this.art.precio });

    this.art.codigo=null;

    this.art.descripcion=null;

    this.art.precio=null;  }

  seleccionar(art){

    this.art.codigo=art.codigo;

    this.art.descripcion=art.descripcion;

    this.art.precio=art.precio; }

 modificar(){

  for(let x=0;x<this.articulos.length;x++)

    if (this.articulos[x].codigo==this.art.codigo) {

      this.articulos[x].descripcion=this.art.descripcion;

      this.articulos[x].precio=this.art.precio;

      return; } alert('no existe el codigo de articulo ingresado'); } }

app.component.html

<div>

<h1>{{title}}</h1>

  <table border="1" *ngIf="hayRegistros(); else sinarticulos">

    <tr>

      <td>Codigo</td><td>Descripcion</td><td>Precio</td><td>Borrar</td><td>Seleccionar</td>

    </tr>

    <tr *ngFor="let art of articulos">

      <td>{{art.codigo}}</td>

      <td>{{art.descripcion}}</td>

      <td>{{art.precio}}</td>

      <td><button (click)="borrar(art) ">Borrar?</button></td>

      <td><button (click)="seleccionar(art) ">Seleccionar</button></td>

    </tr>

  </table>

  <ng-template #sinarticulos><p>No hay articulos.</p></ng-template>

  <div>

    <p>

      Codigo:<input type="number" [(ngModel)]="art.codigo" />

    </p>

    <p>

      Descripcion:<input type="text" [(ngModel)]="art.descripcion" />

    </p>

    <p>

      Precio:<input type="numbre" [(ngModel)]="art.precio" />

    </p>

    <p><button (click)="agregar()">Agregar</button>

    <button (click)="modificar()">Modificar</button></p>

  </div>

</div>