title: Angular 2—change component selector
body: <p>The <a href="https://angular.io/docs/ts/latest/guide/displaying-data.html" rel="nofollow noreferrer">Angular 2 docs</a> say to define a component like this, using a magic string for the selector name:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  @Component({
     selector: 'card',
     template: `
       &lt;div class="card"&gt;{{title}}&lt;/card&gt;
     `
  })
  export class Card {
     title = 'Card Title';
  }
  </code></pre>
  
  <p>If I do this, am I stuck with <code>&lt;card&gt;</code> as the only way to use this component in the future? Can an app have only one type of component with this selector? For example, is it possible to use a <code>&lt;card&gt;</code> from a third-party library, and also use my own <code>&lt;card&gt;</code>?</p>
  
  <p>This is trivial in React, because component names are just variables.</p>
  
  <pre class="lang-js prettyprint-override"><code>import OtherCard from 'card'
  const Card = title =&gt; &lt;div className="card"&gt;{title}&lt;/div&gt;
  const Composable = title =&gt; &lt;OtherCard&gt;&lt;Card title={title} /&gt;&lt;/OtherCard&gt;
  </code></pre>
  
  <p>One of the reasons I ask is so I can know whether to namespace Angular 2 component selectors like in Angular 1 and Objective-C:</p>
  
  <p><code>selector: 'initech-card'</code></p>