title: Angular 7 - Access dynamic property of child from parent component
body: <p>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 <code>app.component.html</code> as follows:</p>
  
  <pre><code>&lt;h1&gt;{{ routeTitle }}&lt;/h1&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>with <code>app.component.ts</code> set up as:</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    @Input() routeTitle;
  }
  </code></pre>
  
  <p>I then have 2 other basic components set up just to show that my routing works (which they do), but for example on <code>dashboard.component.ts</code>, I cannot seem to pass <code>routeTitle</code> from it (being the child component) back up to the Parent (app.component) to display in the H1 tag:</p>
  
  <pre><code>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)';
      }
    }
  }
  </code></pre>
  
  <p>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!</p>