title: Error while passing parameters to the constructor of the base class of a component in angular 2/4 using inheritance
body: <p>I am using inheritance in typescript with angular 4 to extend a derived class component from the base class. But whenever i try to pass a variable/property to my constructor of base class and <code>ngc</code> compile the project, it gives me an error of- </p>
  
  <pre><code>Can't resolve all parameters for BaseComponent in C:/path/src/components/base_component/base_component.component.ts
  </code></pre>
  
  <p>My base class-</p>
  
  <pre><code>export class BaseComponent {
      // Input values
      @Input() selectedOption: string;
      @Input() data : object;
      @Input() disabled : boolean;
      @Input() title: string;
  
      eventDetails : object = {
          type: 'onOptionChange',
          name: 'base_dropdown',
          value: '',
      };
  
      // Component output
      @Output() onOptionChange: EventEmitter&lt;object&gt; = new EventEmitter&lt;object&gt;();
  
      constructor(public eventName : any) {
          this.eventDetails["name"] = eventName;
      }
      ngOnChanges() {
          if(this.data &amp;&amp; !this.selectedOption) {
              this.selectedOption = this.dropdownValue(this.data[0]);
          }
      }
      dropdownValue(option : any) {
          if(option.id == -1 ) {
              return option.name;
          }
          else {
              return option.id
          }
      }
  
      onModelChange(selectedOption : any) {
          console.log(this);
          console.log(this.eventDetails);
  
          this.eventDetails["value"] = selectedOption;
          this.onOptionChange.emit(this.eventDetails);
      }
  }
  </code></pre>
  
  <p>My derived class-</p>
  
  <pre><code>@Component({
    selector: 'character-style-dropdown',
    template: `
          &lt;base-dropdown
              [disabled]="disabled"
              [selectedOption]="selectedOption"
              [data]="characterStyleConfig"
              [title]="title"
              (onOptionChange)="this.onOptionChange.emit($event)"&gt;
          &lt;/base-dropdown&gt;
      `
  })
  
  export class CharacterStyleDropdown extends BaseComponent {
      characterStyleConfig : object;
      title = "Character Style:";
  
      constructor (
          private getStyleListService : GetStyleListService
      ) {
          super("character_dropdown");
          this.getStyleListService.getStyles("getCharacterStyle")
          .subscribe(
              (styles : object) =&gt; this.characterStyleConfig = styles["styles"] ,
              (error : any) =&gt; console.log(error)
          );
      }
  }
  </code></pre>
  
  <p><strong>EDIT</strong>: Also, this way of inheritance works in another case where i am inheriting some component into some other component. But in this case it fails. Is it maybe because i am inheriting this base component into 7 other components, but i have <code>super("string")</code> in all of them.
  Is there any way of may be default initialize the property of constructor so it won't have to resolve parameters in case i didn't provide any ?</p>
  
  <p>How can i fix this error ?</p>