title: Angular 2: What is an @Input/@Output alias?
body: <p>While reading about <code>@Input()</code> and <code>@Output()</code> I have found that we can use an alias instead of using the property name for the decorators.</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>  class ProductImage {
      //Aliased
      @Input('myProduct') product: string;
  
      //Un-aliased
      @Input() product: string;//not aliased
    }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>//Aliased attribute
  &lt;SomeComponent [myProduct] = "Product Name"&gt;&lt;/SomeComponent&gt;
  
  //Un-aliased attribute
  &lt;SomeComponent [product] = "Product Name"&gt;&lt;/SomeComponent&gt;
  </code></pre>
  
  <p>The official Angular <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html" rel="noreferrer">documentation</a> says:</p>
  
  <blockquote>
    <p>Sometimes we want the public name of an input/output property to be different from the internal name.
    This is frequently the case with attribute directives. Directive consumers expect to bind to the name of the directive. For example, when we apply a directive with a myClick selector to a  tag, we expect to bind to an event property that is also called myClick.</p>
  </blockquote>
  
  <p>And <a href="http://www.syntaxsuccess.com/viewarticle/input-and-output-in-angular-2.0" rel="noreferrer">This</a> tutorial briefly explains it:</p>
  
  <blockquote>
    <p>an alias let's me override the property name to be the alias instead of the original property name</p>
  </blockquote>
  
  <p>Other than that I have not been able to find anything else on aliasing <code>@Input()</code> and <code>@Output()</code> on SO or through Google.</p>
  
  <p><strong>Things I would like to know are</strong>:</p>
  
  <ul>
  <li>What does 'aliasing' attempt to achieve?</li>
  <li>Is 'aliasing' something that we should be using regularly? </li>
  </ul>