Como chamar uma função no component.html?

Fala ai Henrique, tudo bem? Caso você quer que essa função seja chamada assim que o componente for carregado na tela, você pode utilizar os ciclos de vida dos componentes.

Nesse caso, poderia utilizar o ngOnInit, ficaria algo assim:

export class AppComponent implements OnInit {

 ngOnInit() {
   this.hello();
 }

 hello() {
    console.log('Olá);
 }
}

Espero ter ajudado.

Na verdade a função que eu tô fazendo vai receber um inteiro como parâmetro, que ele vai pegar no html, por isso eu não acertei fazer pelo ngOnit.

Entendi, consegue passar mais detalhes do que precisa fazer? Assim fica mais fácil te guiar em um caminho para uma possível solução.

Fico no aguardo.

Vou tentar resumir o código aqui pra ver se fica melhor. Na verdade não é um inteiro que ele vai receber como parâmetro, é uma string.

É mais ou menos isso:

component.ts:

export class nomeDaClasse implements OnInit {

  vetor: Array<any> = new Array();

  constructor(private http: HttpClient) { }

  ngOnInit() {

    this.exibir().subscribe(listar =>{
      this.vetor= listar;
    }, err => {
      console.log('Erro', err);
    })
  }

  exibir() : Observable<any>{
    return this.http.get("Url para o json");
  }

funcao(nome: string){
    console.log(nome);
}

}

Supondo que o json tem esse formato:

[
   {
      "nome":"Maria",
      "idade":30
   },
   {
      "nome":"João",
      "idade":35
   },
   {
       "nome":"José",
       "idade":60
   }
]

no html.componente

<!-- Exibindo o json -->
<div>

    <table class="table">
        <thead>
            <th>Nome</th>
               <th>Idade</th>
    </thead>

        <tbody>
            <tr *ngFor="let c of vetor">

               <th>{{c.nome}}</th>
               <th>{{c.idade}}</th> 

            </tr>

        </tbody>
    </table>    
</div>

<!-- Chamando a função -->

    <tr *ngFor="let c of vetor">

               <th>{{funcao(c.nome)}}</th>

         </tr>

Então, pelo meu raciocínio, a função deveria estar sendo chamada apenas 3 vezes, mas ela se repete várias vezes, então acredito que essa não seja a melhor maneira de se chamar a função.

Fala Henrique, obrigado pelas informações, nesse caso eu vejo dois caminhos:

1. Trabalhar com computed properties
2. Continuar usando funções.

A ideia sobre computed properties seria você criar um get dentro do seu componente referente ao nome, por exemplo:

export class nomeDaClasse {

    @Input() private name: string
    @Input() private lastName: string

      get nomeCompleto() {
        return `${this.name} ${this.lastName}`
    }

}

Nesse caso você poderia criar um outro componente que iria receber essas duas propriedades e dentro do template dele você usa o nomeCompleto:

<div>{{ nomeCompleto }}</div>

Ou seguindo o que você já fez, o motivo dele chamar a função varias vezes é porque o Angular passa por alguns ciclos de vida, talvez ele esteja disparando mais de uma renderização do componente.

Sendo assim, ocasionando as diversas chamadas.

Espero ter ajudado.

Acho que não serve essa solução, porque get não pode receber parâmetros. E o que eu preciso saber é justamente como fazer para não ocasionar diversas chamadas :(

Na verdade a primeira solução funciona, mas, vocÊ vai precisar criar um componente para realizar a abstração do get para você.

Sobre a execução da função, você pode tentar mudar a estratégia padrão do Angular para detecção de mudanças (change detection).

Por padrão o valor dela é Default, você pode tentar mudar para o OnPush, isso vai garantir que certas mudanças apenas ocorram quando a referência de seus valores mudaram.

Para mais informações:

https://blog.usejournal.com/angular-optimization-memoized-pipe-functions-in-templates-75f62e16df5a

Espero ter ajudado.