Você deve criar uma variável para receber os valores dentro do component. Veja esse exemplo:
@Component({
selector: 'app-button',
template: `
<button type="submit">{{label}}</button>
`,
})
export class AppButtonComponent {
@Input() label: string;
}
Isso irá fazer com que você precise declarar a variável label
no momento em que for criar o componente, assim:
<app-button [label]="'Teste'"></app-button>
Note que eu declarei o nome "Teste" dentro de aspas simples, pois estou declarando ela manualmente. Se fosse uma outra variável dentro do seu outro component, você poderia passar a variável diretamente, sem a necessidade de aspas, assim:
<app-button [label]="minhaVariavel"></app-button>
Observação: Você não consegue declarar nada dentro da declaração de app-button
pois, ao renderizar, o Angular irá substituir o que você declarou manualmente pelo que foi declarado na propriedade template
ou templateUrl
.
<button type="submit">{{name}}</button>
, no HTML<app-button name="ENVIAR"></app-button>
, no component adicione dentro da classe@Input() name:string;
e importeInput