title: custom attributes on custom html tags in angular 2
body: <p>I've built a component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-g-switch',
    template: `
      &lt;div id="switch" (click)='toggle()' [ngStyle]="{'background-image': 'url('+photo+')'}"&gt;&lt;/div&gt;
    `,
    styleUrls: ['./g-switch.component.scss']
  })
  export class GSwitchComponent implements OnInit {
  
    _value: number;
    photo = '../../assets/sw-1-1.png';
  
    constructor() { }
  
    ngOnInit() {
      // this._value = 1;
    }
  
    public returnValue(): number {
      return this._value;
    }
  
    toggle() {
      this._value++;
      if (this._value === 4) {
        this._value = 1;
      }
      this.photo = '../../assets/sw-1-' + this._value + '.png';
    }
  
  }
  </code></pre>
  
  <p>which I include in my template with</p>
  
  <pre><code>&lt;app-g-switch #sw1&gt;&lt;/app-g-switch&gt;
  </code></pre>
  
  <p>I'd like to be able to pass value to the component, which I've seen done before like this,</p>
  
  <pre><code>&lt;app-g-switch #sw1 [value]="2"&gt;&lt;/app-g-switch&gt;
  </code></pre>
  
  <p>How can this be achieved? I tried to implement a setter but it didn't work.</p>