Reusing Components in Angular 2
<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>