Angular: 2 way data binding for a custom input in a child component

Question

How to make 2-way data binding for a custom input in child component in Angular 8?

I used banana-in-a-box [(...)] syntax but it doesn't make changes in child component visible in the parent component.

In the result, it should work with the banana-in-a-box syntax.

parent.component.ts

...
public childVisibility: boolean = true;
...

parent.component.html

childVisibility : {{childVisibility}}

<app-child-component [(visible)]="childVisibility">
</app-child-component>

child.component.ts

@Component({
  selector: 'app-child-component',
  templateUrl: './app-child.component.html',
  styleUrls: ['./global-search-results.component.scss']
})
export class ChildComponent {
  @Input() visible: boolean;

  constructor() {}

  public changeVisible() { 
    this.visible = false;
  }
}

child.component.html

<button (click)="changeVisible()">
  Change Visible
</button>

Possible duplicate of stackoverflow.com/questions/42006770/… — Shumail
– Shumail, Commented Sep 25, 2019 at 11:31
can please what you trying to do here >> trying to accept as input or emit as output — harkesh kumar
– harkesh kumar, Commented Sep 25, 2019 at 11:35
Possible duplicate of Angular2 Component @Input two way binding — Igor
– Igor, Commented Sep 25, 2019 at 11:42

Adrita Sharma · Accepted Answer · 2019-09-25 11:38:47Z

1

Try like this:

child.component.ts:

@Output() visibleChange = new EventEmitter();

public makeVisible() { 
   this.visible = false;
   this.visibleChange.emit(this.visible)
}

parent.component.html

<app-child-component [(visible)]="childVisibility" >
</app-child-component>

Working Demo

answered Sep 25, 2019 at 11:38

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

3 Comments

meteor Over a year ago

Not bad custom example but you forgot about the dependency in the naming between visible and visibleChange. I mean the next: @Input() visible: boolean; @Output() visibleChange = new EventEmitter<boolean>();

Adrita Sharma Over a year ago

Which dependency?

meteor Over a year ago

The cause is the suffix 'Change' in the event's name visibleChange. I mean this.

meteor · Accepted Answer · 2019-09-25 11:52:42Z

1

child.component.ts

@Input()  visible: boolean;
@Output() visibleChange = new EventEmitter<boolean>();

public changeVisible() { 
   this.visible = false;
   this.visibleChange.emit(this.visible);
}

parent.component.html

<app-child-component [(visible)]="childVisibility">
</app-child-component>

The cause here is the suffix 'Change' in the event's name visibleChange. If the property binding name is 'x', the event binding name should be exactly 'xChange'. Only then angular recognizes banana-in-a-box [()] syntax.

Detailed example: http://embed.plnkr.co/Jcu0iNkaUeRF7KEF7wA4/

edited Sep 25, 2019 at 11:52

answered Sep 25, 2019 at 11:44

meteor

86112 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular: 2 way data binding for a custom input in a child component

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related