0

I have a problem in my angular application that Button Status can not be changed in a child componnent, now I show my code firstly.

this is a child component

<child-component
              [(canAddMore)]="canAddMoreSo"
              [index]="index"
              [formGroup]="form"
              [selectedValues]="soValues"
              controlName="so"
            ></child-component>

and child component ts file

@Input() selectedValues: number[];
  @Input() index: number;
  @Input() formGroup: FormGroup;
  @Input() controlName: string;

  private _canAddMore: boolean;
  @Input() public set canAddMore(value: boolean){
    this._canAddMore = value;
    this.canAddMoreChange.emit(value);
  }
  @Output() public canAddMoreChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }

  public add(): void{
    this.canAddMore = false;
  }

  public remove(): void{
    this.canAddMore = true;
    this.formGroup.get(this.controlName).reset();
  }

this child component, there are 2 buttons, the one is add button, which can show select dropdown, and the other one is delete, which can hidden select dropdown.

the HTML of this child component looks like this:

<label [formGroup]="formGroup">
  <select class="parameterInputSelect" [formControlName]="controlName" *ngIf="!_canAddMore">
    <option *ngFor="let param of selectedValues" [value]="param">{{param}}</option>
  </select>
  <button mat-mini-fab color="primary" matTooltip="Add Sort Order" *ngIf="_canAddMore"
          (click)="add()">
    <mat-icon>add</mat-icon>
  </button>
  <button
    class="delete-button"
    mat-mini-fab color="primary"
    matTooltip="Remove Sort Order"
    (click)="remove()"
    *ngIf="!_canAddMore">
    <mat-icon>delete</mat-icon>
  </button>
</label>

the problem is, if I click add button, and the delete button, the select dropdowm will not be hidden.

any solutions?

PMO1948
  • 2,210
  • 11
  • 34
user1938143
  • 1,022
  • 2
  • 22
  • 46
  • You have controlName as Input prop but here you are missing the [], controlName="so", should be [controlName]="so" – lissettdm Jan 05 '21 at 12:26

1 Answers1

0

You're trying to set the input value, which is problematic. Data communication with input is one directional, that means that you can pass data from a parent to child, but you can't assign the data from the child to parent by simply setting value to the input value.

What you need to do instead, is use Output, then receive the event on the parent component and set the data there.

First, you need to pass in the item and then handle an event, here's how it'd like like in the parent component:

class ParentComponent {
  crossOffItem(item) {
   //handle here
  }
}

<app-input-output [item]="currentItem" (deleteRequest)="crossOffItem($event)"></app-input-output>

And in the child component:

export class ChildComponent {
  @Input() item;
  @Output() deleteRequest = new EventEmitter()

  deleteItem(item) {
    this.deleteRequest.emit(item)
  }
}

Working stackblitz example:

https://stackblitz.com/edit/angular-ivy-nzyre4?file=src%2Fapp%2Fhello.component.ts

Yair Cohen
  • 2,032
  • 7
  • 13