CODEWITHSUNDEEP
angulartypescriptangular7
realist
realist

Reputation: 2375

Change variable in parent component in angular 7

I'm using angular 7. And I have child component like below stackblitz. But, I can access my variable on parent control by @Input but I couldn't change. How can I do this in below stackblitz? My aim is hiding modal by set displayPopup=false on hide button click

STACKBLITZ

Upvotes: 2

Views: 1842

Answers (2)

Jamie Rees
Jamie Rees

Reputation: 8183

What you need is an EventEmitter on the popup.component.ts

Here is a working example:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent {

  @Output() public hide: EventEmitter<void> = new EventEmitter();

  hideModal() {
      this.hide.emit();
  }
}

then on the parent you can subscribe to that event like this:

<app-popup *ngIf="displayPopup" (hide)="displayPopup = false;"></app-popup>

Upvotes: 3

user4676340
user4676340

Reputation:

You can use a custom two-way binding like this stackblitz : 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {

  private _bool: boolean;
  @Output() boolChange = new EventEmitter();

  set bool(value) { this._bool = value; this.boolChange.emit(value); }
  @Input() get bool() { return this.bool; }

  constructor() { }

  ngOnInit() {
  }

  hideModal() {
  this.bool = false;
  }
}

Upvotes: 2

Related Questions