CODEWITHSUNDEEP
angularangular-routingpass-data
maGz
maGz

Reputation: 827

Angular 7 - Access dynamic property of child from parent component

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!

Upvotes: 2

Views: 2141

Answers (2)

vikas
vikas

Reputation: 16

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

  1. If you want to pass some data from child to parent then you should use @Output.

  2. 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.

Upvotes: 0

DeborahK
DeborahK

Reputation: 60528

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.

enter image description here

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

Upvotes: 3

Related Questions