title: Angular 2 - same component with different text
body: <p>I would like to use same component many times, but with different text. How can I do that?</p>
  
  <p>My code:
  jumbotron.component.html:</p>
  
  <pre><code>&lt;div class="jumbotron text-center"&gt;
     &lt;h1 &gt;{{jumbotronText}}&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>@Component({
  selector: 'my-app',
  template: `
              &lt;navbar&gt;&lt;/navbar&gt;
              &lt;jumbotron &gt;&lt;/jumbotron&gt;
              &lt;jumbotron &gt;&lt;/jumbotron&gt;
              &lt;jumbotron &gt;&lt;/jumbotron&gt;
              `
              ,
  directives: [NavbarComponent, JumbotronComponent]})
  export class AppComponent { }
  </code></pre>
  
  <p>I tried do it like this:</p>
  
  <pre><code>        &lt;jumbotron [jumbotronText]="My text to display"&gt;&lt;/jumbotron&gt;
  </code></pre>
  
  <p>And this:</p>
  
  <pre><code>        &lt;jumbotron jumbotronText="My text to display"&gt;&lt;/jumbotron&gt;
  </code></pre>
  
  <p>But only got errors. I think that should be easy, but I cant find idea how to solve that. </p>