Angular 2 - same component with different text - data-binding

Question

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

Answer 1

First, you have to mark the jumbotronText with the Input() annotation in the Jumbotron component:
#Component({
selector: 'jumbotron',
template: `
<div class="jumbotron text-center">
<h1 >{{jumbotronText}}</h1>
</div>`
})
export class JumbotronComponent {
//here is important line
#Input() jumbotronText:string = "";
constructor() { }
}
Then, you can pass data in from the caller. If it is static text you can do this:
template: `
<navbar></navbar>
<jumbotron jumbotronText="One" ></jumbotron>
<jumbotron jumbotronText="Two" ></jumbotron>
<jumbotron jumbotronText="Three" ></jumbotron>`
And if it is calculated text you do:
template: `
<navbar></navbar>
<jumbotron [jumbotronText]="variableFromCaller1" ></jumbotron>
<jumbotron [jumbotronText]="variableFromCaller2" ></jumbotron>
<jumbotron [jumbotronText]="variableFromCaller3" ></jumbotron>`
That is, if you have variables in the app component which store the strings (or methods, or are somehow otherwise calcualted) you use square brackets to indicate one-way binding. Otherwise, if you have static text you just assign the Input() value the same as any other HTML tag property.
See this Plunker: https://embed.plnkr.co/ve31cnEDidcLeEF7dfVj/

Answer 2

You will either need to use #Input or ng-content. By using the {{ }} syntax you are telling Angular to look for a variable named jumbotronText in AppComponent, but that doesn't exist.
Using #Input()
jumbotron.component.html
<div class="jumbotron text-center">
<h1>{{ jumbotronText }}</h1>
</div>
jumbotron.component.ts
#Component({
// ...
}) export class JumbotronComponent {
#Input() jumbotronText: string;
// ...
}
app.component.ts
#Component({
selector: 'my-app',
template: `
<navbar></navbar>
<jumbotron [jumbotronText]="My text to display"></jumbotron>
`
,
directives: [NavbarComponent, JumbotronComponent]})
export class AppComponent { }
Using ng-content
jumbotron.component.html
<div class="jumbotron text-center">
<h1><ng-content></ng-content></h1>
</div>
app.component.ts
#Component({
selector: 'my-app',
template: `
<navbar></navbar>
<jumbotron>My text to display</jumbotron>
`
,
directives: [NavbarComponent, JumbotronComponent]})
export class AppComponent { }

Answer 3

Adding to Luke's answer. You must import the Input annotation from
#angular/core
When using the #Input() annotation on a property. You can add a string as a parameter to reference the property with an alias.
Example:
#Input("customTitle")
Private title:string;
You can later use
<my-directive [customTitle]="Custom" > </my-directive>