title: Nested Child Component not passing Info to Parent Component
body: <p>I am learning how to pass information between parent and child components. I understand information is passed through @Inputs and @Outputs.</p>
  
  <p>For example, I have a parent class which instantiates a basic string variable called</p>
  
  <pre><code>test: string;
  </code></pre>
  
  <p>and assign it a random string like </p>
  
  <pre><code>  ngOnInit() {
      this.test = "message from parent";
     }
  </code></pre>
  
  <p>I pass this variable through a couple of nested child classes using @Input and in my console.log(test) in my final child class, I successfully return the value I receive from my parent. However, the real issue starts when I change it in the child class. In my child class, I have a function:</p>
  
  <pre><code>@Output() testChange: EventEmitter&lt;any&gt; = new EventEmitter();
  
  newSpecifier(){
      this.test= "this changed"
      this.testChange.emit(this.test)
  
    }
  </code></pre>
  
  <p>and a button to just trigger this function. However, when I click the button, nothing happens to the parent "test". I have a div in the original parent HTML with the {{this.test}} value, but it does not change when I click the button. I don't think my information is passing back to the parent component correctly. Any help pointing me in the right direction would be great, thanks in advance!</p>