Angular 7 - Access dynamic property of child from parent component

Question

So I've very recently started with Angular development, and there's something that I'm totally missing. I have a basic app set up with app.component.html as follows:

<h1>{{ routeTitle }}</h1>
<router-outlet></router-outlet>

with app.component.ts set up as:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @Input() routeTitle;
}

I then have 2 other basic components set up just to show that my routing works (which they do), but for example on dashboard.component.ts, I cannot seem to pass routeTitle from it (being the child component) back up to the Parent (app.component) to display in the H1 tag:

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  @Output() routeTitle;

  constructor() { }

  ngOnInit() {
    if (...somelogic...) {
      this.routeTitle = 'Dashboard';
    }
    else {
      this.routeTitle = 'Dashboard (Courier)';
    }
  }
}

Please help, as this is driving me insane as why I can't seem to get my head around something that shouldn't be taking e this long to figure out. Thank you!

See [this](https://angular.io/guide/component-interaction#parent-listens-for-child-event) for the proper way to use `@Output()`. — R. Richards, Jan 21 '19 at 23:25
If its a dynamic property then you can use the subscribe to that property in your parent. You can do this using a subject. — Nanotron, Jan 22 '19 at 00:10

DeborahK · Accepted Answer · 2019-01-22T00:30:56.917

The word "child" is used too many places and can be a bit confusing.

This code:

<h1>{{ routeTitle }}</h1>
<router-outlet></router-outlet>

Defines a child route

The input properties don't work with child routes.

To use the input property, you need to define the component as a child component ... so something like this:

<h1>{{ routeTitle }}</h1>
<my-child-component [myInputProperty]="myTitle"></my-child-component>

Where the child component is defined as follows:

@Component({
  selector: 'my-child-component',
  templateUrl: './myChild.component.html'
})
export class MyChildComponent {
  @Input() myInputProperty;
  // ...
}

I would assume that what you really want to do is pass data between routes? If so, you don't want to use input/output properties at all. Rather, you want to use one of the many techniques for passing data between routes.

Plus with Angular v7.2 they just added another technique: https://netbasal.com/set-state-object-when-navigating-in-angular-7-2-b87c5b977bb

Thank you Deboarh for the in-depth explanation! I ended reading up on Angular Services and implemented a solution using `BehaviorSubject`. I'll post my final solution below a little later — maGz, Jan 22 '19 at 13:47

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

There is couple of scenario where we need to pass data between components:

If you want to pass some data from child to parent then you should use @Output.
Sometimes we need to pass data between sibling components, there we can use shared services and take advantage of Behavior subject to pass data.

Now with Angular7.2 you can use state feature.

You can look into following article too.

Angular 7 - Access dynamic property of child from parent component

2 Answers2