Why console.log() is printing multiple time in Angular after calling a method from text interpolatio-CodePudding

I used Text interpolation to call a method.

home.component.html <p>{{myMethod()}}</p>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {
  }

  myMethod(){
    console.log("Hey! I am from Home component");
  }

}

In console of chrome browser it is showing:-

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
Hey! I am from Home component
Hey! I am from Home component
Angular is running in development mode. Call enableProdMode() to enable production mode.
Hey! I am from Home component
Hey! I am from Home component
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect...

I am trying to get this output:-

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
Hey! I am from Home component
Angular is running in development mode. Call enableProdMode() to enable production mode.

CodePudding user response：

Look into Angular change detection. The template is evaluated repeatedly to ensure that the data it shows matches the actual data in the component. You should generally not call functions from within the template like you are (in contexts where the function must be evaluated for the template to load) unless you switch to the OnPush change detection strategy since any side effects (like printing to the console) will happen repeatedly and sporadically in response to things like generated events. It's also not good for performance since the functions can be called many times in a short span of time.

There's little point to doing what you're trying to do anyways though. Why would you want to call a function from a template if that function doesn't return anything or have a side effect that affects the display of the template? If you wanted to show data, you'd save it to a component property, then display that:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
    text: string = "Some text!";
}

Then

<p>{{text}}</p>

I mentioned the OnPush change detection strategy, but I would be careful using it. It can have the opposite effect where the template won't be updated at all when you're expecting it to be. It also wouldn't be much use here, since again, it doesn't make much sense to print from the template anyway (besides maybe for debugging purposes).

CodePudding user response：

Invoking methods in the template should be avoided.

https://plainenglish.io/blog/angular-dont-call-a-function-inside-the-template-anymore