title: Angular 4 component with multiple classes
body: <p>I have an app with a component that have few functions inside and I want to make it more readable - what will be the right way / best practice: </p>
  
  <p>Having a service and inject in the construction? or a separate class (let's say MyClass.class.ts) with the functions? and then import the class and create a new object in the component: </p>
  
  <pre><code>let myObj = new MyClass(); 
  </code></pre>
  
  <p>Which takes me for the next question: </p>
  
  <ol start="2">
  <li>Either If I use the first option of creating a service, or the second option of creating a separate class - can I bind the properties from the service / class to the component view? </li>
  </ol>
  
  <p>Means, let's say the service looks something like this: </p>
  
  <pre><code>export class MyService {
      a: string = 'Hello world'; 
      b: number;
  
      c(): number {
        this.b += 1;
        return b;
     }
  
  }
  </code></pre>
  
  <p>and the component:</p>
  
  <pre><code>export class myComponent {
       constructor(myService: myService){}
  
       ngOnInit {
         this.myService.c();
   }
  </code></pre>
  
  <p>and then in the HTML template to do something like this:</p>
  
  <pre><code>&lt;p&gt;{{a}}&lt;/p&gt;
  &lt;p&gt;{{b}}&lt;/p&gt;
  </code></pre>
  
  <p>So it will output the value of a and b. </p>
  
  <p>The question is if by injecting the service to component, the properties became available to bind in the HTML template? </p>
  
  <p>And in case of a class, something like:</p>
  
  <pre><code>export class MyClass {
       a: string = 'Hello world'; 
       b: number;
  
      c(): number {
        this.b += 1;
        return b;
     }
  }
  
  
  
  import { MyClass } from './
  export class myComponent {
  
      constructor(){}
      let myClass = new MyClass();
  
      ngOnInit {
        this.c();
      }  
  
  }  
  </code></pre>
  
  <p>This just a general description of my situation. The thing is that I have few good hundreds lines of code and all the functions should be under one component, so I was thinking should I create a new class or a service, but then if I can bind the properties from the class / service to the html template of the component. </p>
  
  <p>It's mean, if by injecting service / creating new object of the class, the properties become available to bind in the component's html template?</p>
  
  <p>Thanks. </p>