Angular - @Input and @Output vs. Injectable Service : <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>
