Angular 5 Deleting object from array in parent component

Question

I am new to angular.

I am making a Quote listing website in Angular 5. The child component "Quotes" is where the user interacts while the array I would like to delete form is in app.component.ts. Each quote is an object in an array and I would like the entire object to be deleted when the delete button is clicked but I just get loads of errors. The current delete button in the "quotes" component html is as follows:

<a href (click)="delete(true)">
        <i class="trash icon"></i>
        Delete
      </a>

My app.component.ts is as follows:

  delete(isComplete,index){
if (isComplete){
    let toDelete=confirm(`Are you sure you want to delete ${this.quotes[index]}`)

    if(toDelete){
        this.quotes.splice(index,1)
    }
}
}

My app.component.html is as follows:

<div *ngFor="let quote of sortedQuotes(); let i = index" [quote]="quote">
  <app-quote 'deleteQuote($event,i)'>
  </app-quote>
</div>

It does not currently work as adding the delete functions broke something. I am getting the error:

Uncaught Error: Template parse errors:
Unexpected closing tag "app-quote". It may happen when the tag has 
already been closed by another tag. For more info see 
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have- 
   implied-end-tags (" of sortedQuotes(); let i = index" [quote]="quote">
  <app-quote 'deleteQuote($event,i)'>
  [ERROR ->]</app-quote>
</div>
</div>"): ng:///AppModule/AppComponent.html@18:6
at syntaxError (compiler.js:485)
at DirectiveNormalizer._preparseLoadedTemplate (compiler.js:3220)
at eval (compiler.js:3200)
at Object.then (compiler.js:474)
at DirectiveNormalizer._preParseTemplate (compiler.js:3200)
at DirectiveNormalizer.normalizeTemplate (compiler.js:3178)
at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14908)
at eval (compiler.js:34412)
at Array.forEach (<anonymous>)
at eval (compiler.js:34411)

You have a value without an attribute name, presumably you're missing a (click)=. — jonrsharpe
– jonrsharpe, Commented Mar 19, 2018 at 11:56

Konrad Viltersten · Accepted Answer · 2019-04-07 16:37:39Z

3

you need EventEmitter that will emit event from your child component

<app-quote (delete)='deleteQuote($event,i)'>
</app-quote>

child component.ts must be like this

@Output() delete:EventEmitter<type> = new EventEmitter<type>();

onDeleteButtonClick() {
  //you need to emit event 
  delete.emit();
  // this can be done from button click mostly, which i am guessing is your case
}

and you parent component.ts will be

deleteQuote(event:type,i:type) {
}

edited Apr 7, 2019 at 16:37

Konrad Viltersten

40.2k90 gold badges296 silver badges525 bronze badges

answered Mar 19, 2018 at 11:56

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 Deleting object from array in parent component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related