DELETE EN ANGULAR VERSIN 1 Aadimos en el

DELETE EN ANGULAR

VERSIÓN 1 • Añadimos en el import de article. component. ts: Input y Output. Añadimos el siguiente fragmento de código dentro del export: @Input() position: number; @Output() Cualquiera = new Event. Emitter(); • • Añadimos el siguiente método: send. Delete. Message(event): boolean{ console. log(this. position); this. Cualquiera. emit({position: this. position}); return false; }

VERSIÓN 1 • Añadimos este fragmento de código html en article. component. html debajo del click downvote: <li class="item"> <a href (click)="send. Delete. Message($event)"> delete </a> </li>

VERSIÓN 1 • Cambiamos un poco el código del bucle que muestra los artículos en app. component. html: <div class="ui grid posts"> <app-article *ng. For="let article of sorted. Articles(); let pos=index" [article]="article" [position]="pos" (Cualquiera) = "delete. Article. By. Position($event)" > </app-article> </div>

VERSIÓN 1 • Por último creamos el método que borrará el artículo en app. component. ts: delete. Article. By. Position(event){ console. log('borro articulo posicion: ' + event. position ); this. articles. splice(event. position, 1); }

VERSIÓN 2 • Añadimos en el import de article. component. ts: Input • Añadimos el siguiente fragmento de código dentro del export: @Output() Cualquiera = new Event. Emitter(); • Añadimos el siguiente método: delete(): boolean { console. log(`borro ${this. article. id}`); this. Cualquiera. emit({id: this. article. id}); return false; }

VERSIÓN 2 • Cambiamos los atributos y el constructor en article. model. ts: id: string; title: string; link: string; votes: number; constructor(id: string, title: string, link: string, votes? : number) { this. id = id; this. title = title; this. link = link; this. votes = votes || 0; }

VERSIÓN 2 • Añadimos este fragmento de código html en article. component. html debajo del click downvote: <li class="item"> <a href (click)=“delete()"> delete </a> </li>

VERSIÓN 2 • Cambiamos un poco el código del bucle que muestra los artículos en app. component. html: <div class="ui grid posts"> <app-article *ng. For="let article of sorted. Articles(); " [article]="article" (Cualquiera) = ‘delete. Message($event)’ > </app-article> </div>

VERSIÓN 2 • Por último creamos el método que borrará el artículo en app. component. ts: delete. Message(event): void{ console. log('Borrame ' + event. id); let index: number =0; for (let article of this. articles) { console. log(article. id); if (article. id == event. id){ this. articles. splice(index, 1); break; } index += 1; } }

VERSIÓN 2