title: Angular - @Input and @Output vs. Injectable Service
body: <p>I'm asking myself where are the differences between <code>@Input</code>/<code>@Output</code> in parent-/childcomponents <strong>and</strong> using services which is only once instatiated with dependency Injection<code>@Injectable()</code>. Or are there any differences besides Input/Output can only be used in parent-/child-comp.</p>
  
  <p>Following Example for better visualization: </p>
  
  <h2>With @Input:</h2>
  
  <pre><code>&lt;parent-comp&gt;
     &lt;child-comp [inputFromParent]="valueFromParent"&gt;&lt;/child-comp&gt;
  &lt;/parent-comp&gt;
  </code></pre>
  
  <p>ChildComponent:</p>
  
  <pre><code>@Component({
    selector: 'child-comp',
    template: ...
  })
  export class ChildComponent {
    @Input() public inputFromParent: string;
  }
  </code></pre>
  
  <h2>With dependency Injection</h2>
  
  <pre><code>@Injectable()
  export class Service {
     private value: string;
  
  public get value(): string {
     return value;
  }
  
  public set value(input): void {
     value = input;
  }
  
  }
  </code></pre>
  
  <p>Now we can set the value in the parent comp. and get the value in the child comp with dependancy injection.
  ChildComponent:</p>
  
  <pre><code>@Component({
    selector: 'child-comp',
    template: ...
  })
  export class ChildComponent {
    private value: string;
    constructor(private service: Service) {
    this.value = this.service.getValue;
  }
  
  }
  </code></pre>
  
  <p>Even though the first approach looks simpler, I recognized using 3-4 properties carriyng through parent-/child comp. with <code>@Input</code>/<code>@Output</code> makes the tamplete very confusing and clunky.</p>