Update parent component property from child component in Angular 2

Body

I'm using @input to receive a property from parent component in order to activate a CSS class in one of child component's element.

I'm able to receive the property from parent and also activate the class. But this works only once. The property i'm receiving from parent is a boolean data typed and when I set the status of it to false from child component, it does not change in parent.

Plunkr: https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview

app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header';
import { SearchComponent } from './header/search';

@Component({
  selector: 'my-app',
  template: `
    <app-header></app-header>
  `,
})
export class App {
  name:string;
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HeaderComponent, SearchComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

header.ts

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

@Component({
  selector: 'app-header',
  template: `<header>
              <app-search [getSearchStatus]="isSearchActive"></app-search>
              <button (click)="handleSearch()">Open Search</button>
            </header>`
})
export class HeaderComponent implements OnInit {
  isSearchActive = false;

  handleSearch() {
    this.isSearchActive = true
    console.log(this.isSearchActive)
  }

  constructor() { }
  ngOnInit() { }
}

header/search.ts

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

@Component({
  selector: 'app-search',
  template: `<div id="search" [class.toggled]="getSearchStatus">
              search 
              <button  (click)="getSearchStatus = false" class="close">Close Search</button>
            </div>`
})
export class SearchComponent implements OnInit {
  @Input() getSearchStatus: boolean;

  constructor() { }

  ngOnInit() {

  }
}

Please check the above given plunker. The open search function works only once. After closing the search, it does not trigger again.

Is @input is the proper use case for this scenario? Please help me fix this. (Please update the plunker).

n00dl3

You need to use 2 way data-binding.

@Input() is one way data-binding. to enable 2 way data-binding you need to add an @Output() corresponding to the property, with a "Change" suffix

@Input() getSearchStatus: boolean;
@Output() getSearchStatusChange = new EventEmitter<boolean>();

when you want to publish the change made to your property to the parent, you need to notify the parent with:

this.getSearchStatusChange.emit(newValue)

and in the parent you need to use the banana-in-a-box notation for that property:

[(getSearchStatus)]="myBoundProperty"

you can also bind to the property and trigger a callback when it changes in child:

[getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)"

see the plnkr

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

angular 2 access child component property from parent component

From Dev

Update parent component title from routed child component in Angular 2

From Dev

how to update parent component from child component in angular2

From Dev

Not able to update child component view from parent in angular 2

From Java

Update child component from parent in Angular

From Dev

Angular 2 ngModel in child component updates parent component property

From Dev

Angular to update UI from the child component reflect the value to the parent component

From Dev

Toggle property in parent Component from Child Component in Angular2 (similar to $emit in AngularJS)

From Dev

Angular 2, How to pass options from parent component to child component?

From Dev

Angular2 - Trying to add a component into a child component from parent

From Dev

Angular 2 Parent Component Losing Input Binding from Child Component

From Dev

Angular 2: Parent-Child Component Property Binding

From Dev

Angular 2 - Routing from the `first child` component to a `second child` component of a parent component

From Dev

Angular 2 - Routing from the `first child` component to a `second child` component of a parent component

From Dev

Angular2 access to the methods in child component from parent

From Dev

Angular2 access to the methods in child component from parent

From Dev

Angular 2+ formgroup setValue in child component form from parent

From Java

Angular Parent Component property does not get updated when changing value from Child Component

From Java

vuejs update parent data from child component

From Dev

(VueJS) Update parent data from child component

From Dev

Angular access parent variable from child component

From Dev

Passing object from server from parent component to child component angular2

From Java

Angular updating child component input from parent component

From Dev

Angular 2 - how can a child component speak to a parent component?

From Dev

Angular2 child component controlling routing for parent component

From Dev

How to access a child component class from the parent component class in Angular2?

From Dev

Accessing Parent Component Data / Properties from a Child Component in Angular2

From Dev

Angular2 - Accessing parent component's variable from child component

From Dev

Angular2 Routing - Passing data from parent component to a sub-child component

Related Related

  1. 1

    angular 2 access child component property from parent component

  2. 2

    Update parent component title from routed child component in Angular 2

  3. 3

    how to update parent component from child component in angular2

  4. 4

    Not able to update child component view from parent in angular 2

  5. 5

    Update child component from parent in Angular

  6. 6

    Angular 2 ngModel in child component updates parent component property

  7. 7

    Angular to update UI from the child component reflect the value to the parent component

  8. 8

    Toggle property in parent Component from Child Component in Angular2 (similar to $emit in AngularJS)

  9. 9

    Angular 2, How to pass options from parent component to child component?

  10. 10

    Angular2 - Trying to add a component into a child component from parent

  11. 11

    Angular 2 Parent Component Losing Input Binding from Child Component

  12. 12

    Angular 2: Parent-Child Component Property Binding

  13. 13

    Angular 2 - Routing from the `first child` component to a `second child` component of a parent component

  14. 14

    Angular 2 - Routing from the `first child` component to a `second child` component of a parent component

  15. 15

    Angular2 access to the methods in child component from parent

  16. 16

    Angular2 access to the methods in child component from parent

  17. 17

    Angular 2+ formgroup setValue in child component form from parent

  18. 18

    Angular Parent Component property does not get updated when changing value from Child Component

  19. 19

    vuejs update parent data from child component

  20. 20

    (VueJS) Update parent data from child component

  21. 21

    Angular access parent variable from child component

  22. 22

    Passing object from server from parent component to child component angular2

  23. 23

    Angular updating child component input from parent component

  24. 24

    Angular 2 - how can a child component speak to a parent component?

  25. 25

    Angular2 child component controlling routing for parent component

  26. 26

    How to access a child component class from the parent component class in Angular2?

  27. 27

    Accessing Parent Component Data / Properties from a Child Component in Angular2

  28. 28

    Angular2 - Accessing parent component's variable from child component

  29. 29

    Angular2 Routing - Passing data from parent component to a sub-child component

HotTag

Archive