Receive multiple inputs in html tag with Angular 2

Question

Receive multiple inputs in html tag with Angular 2

Navigation

#1 by (1 votes)

1

In my app component, I am sending the following inputs to the html. How do I get all of them in html?

export class AppComponent {
  nomeRedeSocial: string = "Minha Rede Social";
  linhaDoTempo: string = "Linha do Tempo";
  perfil: string = "Perfil";
  usuario: string = "Usuário";
}

<header-fix [usuario]="usuario"></header-fix>

I can only receive 1 input.

html angular

asked by anonymous 28.03.2017 / 11:04

1 answer

PSD in 1920px getting huge in 1366px resolution Doubt on how to use Shift in Java

score 1 · Answer 1

If the component is a component that you are creating, you can add more inputs to be able to receive the desired parameters, using @ Input decorator :

@Component({
    templateUrl: './seu-template.html',
    styleUrls: ['./seus-estilos.css'],
    selector: 'header-fix'
})
export class HeaderFixComponent{

@Input() nomeRedeSocial: string;
@Input() linhaDoTempo: string;
@Input() perfil: string;
@Input() usuario: string;

//...

And in the AppComponent:

HTML

<header-fix 
    [usuario]="usuario" 
    [linhaDoTempo]="linhaDoTempo" 
    [perfil]="perfil" 
    [nomeRedeSocial]="nomeRedeSocial">
</header-fix>

TS

export class AppComponent {
    nomeRedeSocial: string = "Minha Rede Social";
    linhaDoTempo: string = "Linha do Tempo";
    perfil: string = "Perfil";
    usuario: string = "Usuário";
}