title: How can call a function in service on click event in angular2?
body: <p>This is the working plunker : <a href="http://plnkr.co/edit/FOJHofLSgLRB4Po5Li6B?p=preview" rel="nofollow">http://plnkr.co/edit/FOJHofLSgLRB4Po5Li6B?p=preview</a> .
  On clicking the classes the corresponding content at the bottom changes, but this is hardcoded &amp; so is it possible to have something that makes the content to come from a service like this : </p>
  
  <pre><code>export class Subjectservice {
    getClass(id : number) : any {
      if(id==15)
        return [{label:  'Science', state: false},{label:  'Computer Science', state: false},{label:  'Social science', state: false},{label:  'Environmental Studies', state: false}];
      else if (id==68) 
        return [{label: 'English', state: false},{label:  'Hindi', state: false},{label:  'Mathematics', state: false},{label:  'Science', state: false}];
      else if (id==910) 
        return [{label: 'English', state: false},{label:  'Hindi', state: false}{label:  'Social science', state: false},{label:  'Sanskrit', state: false}];
      else
      return [{label: 'English', state: false}{label:  'Pol Science', state: false},{label:  'Comp Science', state: false},{label:  'Social science', state: false}];
    }
  }
  </code></pre>