title: Call child component method from parent class - Angular
body: <p>I have created a child component which has a method I want to invoke.</p>
  <p>When I invoke this method it only fires the <code>console.log()</code> line, it will not set the <code>test</code> property??</p>
  <p>Below is the quick start Angular app with my changes.</p>
  <p><strong>Parent</strong></p>
  <pre><code>import { Component } from '@angular/core';
  import { NotifyComponent }  from './notify.component';
  
  @Component({
      selector: 'my-app',
      template:
      `
      &lt;button (click)=&quot;submit()&quot;&gt;Call Child Component Method&lt;/button&gt;
      `
  })
  export class AppComponent {
      private notify: NotifyComponent;
  
      constructor() { 
        this.notify = new NotifyComponent();
      }
  
      submit(): void {
          // execute child component method
          notify.callMethod();
      }
  }
  </code></pre>
  <p><strong>Child</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'notify',
      template: '&lt;h3&gt;Notify {{test}}&lt;/h3&gt;'
  })
  export class NotifyComponent implements OnInit {
     test:string; 
     constructor() { }
  
      ngOnInit() { }
  
      callMethod(): void {
          console.log('successfully executed.');
          this.test = 'Me';
      }
  }
  </code></pre>
  <p>How can I set the <code>test</code> property as well?</p>