title: Access parent component from child component when parent component using ng-content Angular
body: <p>I'm trying to access parent component from child component using dependence injection. It works, I can access to parent to using its methods and properties but I have not seen this approach on Angular doc. So do you have any idea about this approach? Should I use it?</p>
  
  <p>Because the parent component using ng-content (like transclude angularjs) so I cannot using EventEmitter @Output approach.</p>
  
  <p>The bellow is my code:</p>
  
  <p>wizard.component.ts (parent)</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'wizard',
      template: `
          &lt;div&gt;
              &lt;ng-content&gt;&lt;/ng-content&gt;
              &lt;button&gt;Back&lt;/button&gt;
              &lt;button&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      `
  })
  export class WizardComponent implements OnInit {
      steps = [];
  
      constructor() { }
  
      addStep(step) {
          this.steps.push(step);
      }
  
      ngOnInit() { }
  }
  </code></pre>
  
  <p>step.component.ts (child)</p>
  
  <pre><code>import { WizardComponent } from './wizard.component';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'step',
      template: `
          &lt;div&gt;Step &lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;
      `
  })
  export class StepComponent implements OnInit {
      constructor(private parent: WizardComponent) { 
          this.parent.addStep(this);
      }
  
      ngOnInit() { }
  }
  </code></pre>
  
  <p>app.component.html (main app)</p>
  
  <pre><code>&lt;wizard&gt;
      &lt;step&gt;1&lt;/step&gt;
      &lt;step&gt;2&lt;/step&gt;
      &lt;step&gt;3&lt;/step&gt;
  &lt;/wizard&gt;
  </code></pre>
  
  <p>Looking forward to hearing your opinions. Thanks!</p>