Receive multiple inputs in html tag with Angular 2

Question

In my Component app, I am sending the following inputs to html. How do I receive 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.

Answer 1

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

@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";
}