Access to the parent value from child component [Angular]

Question

AppComponent (parent) has main page (layout) and counter of pages:

export class AppComponent {
  counter = '1/3';
}

<div class="counter">
  {{counter}}
</div>

There are also two components (children) that are responsible for the content of pages. From child components, need to have access to the parent value (counter).

One of them:

import {AppComponent} from '../app.component';

export class Page1Component {
  app: AppComponent;
}
SomeEvent($event) {
  this.app.counter='2/3';
}

<div class="content">
 ...
</div>

After the event I get an error: "TypeError: Cannot read property 'counter' of undefined"

Question: How to manipulate a parent variable correctly?

Refer this link to access the parent value from child component : link — Chandru
– Chandru, Commented Sep 12, 2017 at 13:04

JayDeeEss · Accepted Answer · 2017-09-12 13:35:34Z

you can pass the parent variable to the child component through input property.

    import {Input} from '@angular/core';

    export class Page1Component {
      @Input() counter;

    SomeEvent($event) {
      this.counter='2/3';
    }
    }

and in your app you can pass the counter

app.component.html

<page1 [counter]="counter"><page1>

and if you want to change the counter of parent as well you can define an output event emitter and call the method in parent when some event occurs

Update if you want to change the couter of parent, you can try this:

import {Output} from '@angular/core';

export class Page1Component {
  @Output() change: EventEmitter<any> = new EventEmitter();

SomeEvent($event) {
  this.change.emit();
}
}

app.component.html

<page1 [change]="counterChanged()"><page1>

app.component.ts

export class AppComponent{
counterChanged() {
this.counter = "whatever value";
}

}

porgo · Accepted Answer · 2017-09-12 12:55:21Z

1

Add input field in your child component:

@Input() counter: any;

And then you can bind to this porperty in parent html:

<child-component-selector [counter]="counter"></child-component-selector>

answered Sep 12, 2017 at 12:55

porgo

1,7513 gold badges19 silver badges30 bronze badges

1 Comment

Roman Melnyk Over a year ago

ChildComponent it's a content of page (AppComponent). In this cause the markup will break. I just want to change the counter when called one of child component.

Debabrata · Accepted Answer · 2017-09-12 13:01:22Z

0

you are doing this the wrong way you can't do this like that.. You have to do this in the following way by @Input tag

for example:

 export class AppComponent {
   counter = '1/3';
}

in the html of app component
<ChildComponent [counter]="counter"></ChildComponent>

in your child component

import { Component, Input } from '@angular/core';
export class ChildComponent{
        @Input() counter:any;

         //after this you can use counter
   }

2 Comments

Roman Melnyk Over a year ago

ChildComponent it's a content of page (AppComponent). In this cause the markup will break. I just want to change the counter when called one of child component.

Debabrata Over a year ago

you can change the selector.Right?Or am i mistaken?.Correct me if i am wrong

Collectives™ on Stack Overflow

Access to the parent value from child component [Angular]

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related