So I created a delete button for when an element is clicked and I want to be able to remove it. I am using an input decorator but its not receiving the data when I try to delete the button. I console log but it shows the array is empty. Its a little confusing explaining. Essentially its an example of a mini project dilemma I am working on. If someone could also explain a better way of input decorator and how to use it.

    ChildComponent:

    public valuesCheck: string [] = [];

    @Input() valuesFilter: string[] = [];
    public deleteClick(){
      let chipValue = string [] = [];
      this.valuesCheck = this.valuesFilter = chipValue;

      chipValue.splice(0,1);
    }

    Parent Component:
    public filters: CFilter[] | undefined;

    Parent HTML:
    <app-filter-chip  [valuesFiter] = "chipValue">
    <app-filter-chip>

    Child HTML:
    <div closebtn" (click)="deleteClick()">
    <div>

     

CodePudding user response：

That's many problems:

1. Typo valuesFilter => valuesFiter

2. chipValue must be component's variable.

This is the example: stackblitz

CodePudding user response：

What you are doing here is you are allowing your child component to delete data from the parent component. That will happen using Output Emitter Approach (Please use that one).