title: How to avoid god components in Angular?
body: <p>I am experimenting with Angular. In classical fashion I have separated the template, styles and component into 3 different files.</p>
  <p>The component file contains different functions.</p>
  <ul>
  <li>Some are triggered by events (e.g. button clicks) from the template, some are not.</li>
  <li>Some functions are async, some are not.</li>
  <li>Some open modal dialogs, some don't.</li>
  <li>Some execute file operations, others don't.</li>
  <li>Some functions are high-level and return their result through the snackbar, others don't.</li>
  </ul>
  <p>This tends to make component class become a god object, how can this be avoided? And also, how can I avoid the sheer mix of functions? I can export functions to other files, but that means that objects passed to the constructor of the component need to be forwarded which doesn't look like the way to go:</p>
  <pre class="lang-js prettyprint-override"><code>import { doSomething } './helper';
  
  [...]
  
  class Foo Component {
      doSomething(this.snackBar,  &lt;-- smelly code
                       &quot;X&quot;, 1, 2, 3)
  </code></pre>