Best way to change for parent property change

Question

I've got this structure :

@Component({
 selector: "parent-component",
 template: `
 <div>
  <child-component *ngIf='isLogin'></child-component>
 </div>
  `,
})
export class ParentComponent {
  public isLogin = false;

  myFunction( ) {
    if (something) this.isLogin = true;
  }
}

and

@Component({
 selector: "dropteam-header-user",
 template: `
 <button (click)="trigger()">Click me</button>
`,
})
export class ChildComponent {

  trigger() {
    // change ParentComponent's isLogin property here
  }
}

I believe this is very basic stuff here. I just need to be able to change ParentComponent property within the ChildComponent. ParentComponent should also be able to change his own property.

Thanks.

score 0 · Answer 1 · answered Nov 09 '17 at 17:10

You can add a Output to your child component as below

export class ChildComponent {
  @Output() loginStatusChanged : EventEmitter<boolean> = new EventEmitter<boolean>();
  trigger() {
    this.loginStatusChanged.emit(true); // or false
  }
}

then in parent component attach to this event

<dropteam-header-user (loginStatusChanged)="loginStatusChanged($event)"></dropteam-header-user>


export class ParentComponent {
  public isLogin = false;

  myFunction( ) {
    if (something) this.isLogin = true;
  }

  loginStatusChanged(val: boolean) {
    this.isLogin = val;
  }
}

Best way to change for parent property change

1 Answers1