title: Reusing Components in Angular 2
body: <p>When I started using Angular 2 I had the idea that the main reason to create components is because you can reuse them. EG: </p>
  
  <pre><code>&lt;custom-button id="button1"&gt;button 1&lt;/custom-button&gt;
  &lt;custom-button id="button2"&gt;button 2&lt;/custom-button&gt;
  </code></pre>
  
  <p>Is it the case that this is a large reason to go with angular 2 and components in a web app, and it can be done?</p>
  
  <p>I haven't found a resource that specifically answers my question about how to do this.</p>
  
  <p>I'd like to create a button, and an input, the 2 most basic and commonly used html elements, and make them reusable. </p>
  
  <p>I tried to make a button component and reuse it. </p>
  
  <p>I tried to use it in an html template like this: </p>
  
  <pre><code>&lt;custom-button&gt;some text&lt;/custom-button&gt;
  &lt;custom-button&gt;different text&lt;/custom-button&gt;
  </code></pre>
  
  <p>However the text did not show up on the button. Can this be done?</p>
  
  <p>Another thing I'm wondering about is unique html id's when doing this. Am I able to add a unique html id attribute to each instance?</p>
  
  <p>Maybe like:</p>
  
  <pre><code>&lt;custom-button id="display-bikes"&gt;bikes&lt;/custom-button&gt;
  &lt;custom-button id="display-helmets"&gt;helmets&lt;/custom-button&gt;
  </code></pre>
  
  <p>And then I can do some specific css using the unique id of the element?</p>
  
  <p>That's all I want to know, and how to do it. </p>
  
  <p>However here is the rest of my code involved:</p>
  
  <p>component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
      selector: 'custom-button',
      templateUrl: 'app/shared/button.component.html',
      styleUrls: ['app/shared/button.component.css']
  })
  export class ButtonComponent { }
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>button {
    font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif;
    border-radius: 6px;
    height: 60px;
    width: 280px;
    text-decoration: none;
    background-color: $accent;
    padding: 12px;
    color: #FFF;
    cursor: pointer;
  }
  
  button:focus {
      outline:0 !important;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;button md-raised-button type="button" class="btn text-uppercase flex-sm-middle"&gt;
  try now &lt;!-----lets get rid of this and let the client decide what text to display somehow???
  &lt;/button&gt;
  </code></pre>