CODEWITHSUNDEEP
javascriptangular
Arpit Kumar
Arpit Kumar

Reputation: 2249

Best way to interpolate data in Angular 4+

I have a question related to data interpolation in Angular.

For example, if I have to return a value from a function and need to show that value in UI then I will do something like this:

In TS file:

public getUserName() {
    return 'Arpit';
}

In HTML file:

<p>Welcome: {{getUserName()}}</p>

But with this, I have a problem: when I put a console.log inside getUserName function, it prints that console message multiple times. I don't know why this happens.

The second option which I have is: I can take the value of getUserName function in a variable and then I can interpolate that variable in HTML code. But the problem with this option is: if we have 10+ functions those returns some value then we need to define 10+ extra variables as well and If that variable is an object then we sometimes write conditions in UI like this:

*ngIf="user && user.role === 'super_user' && user.status === 'active'"...

It looks like an unclear code and the code won't look beautiful.

So from the best practice point of view and efficiency point of view, I am looking for a solution that can solve my problem.

Thanks.

Upvotes: 3

Views: 387

Answers (3)

mustafa bagwala
mustafa bagwala

Reputation: 431

Yes it will continuously watch for your expression,

I would suggest you to use variable instead of function in interpolation, once your all condition meet, variable will set to TRUE

example:

public user: any = {
 role: 'super_admin',
 status: 'active'
} 
public conditionCheck = false;

public checkCondition(userObj) {
 if (userObj && userObj.role === 'super_admin' && userObj.status === 'active' && 
   ...) {
   this.conditionCheck = true;
 }
}

Upvotes: 1

P.S.
P.S.

Reputation: 16384

Your method fires multiple times, because Angular has a change detection, and interpolated function will run every time, when change detection is run. It's not a good practice, because it consumes a lot of resources, so just defining class property will be more proper way, and your functions will not run multiple times when it's not really necessary.

Regarding 10+ variables: If you want to minimize the amount of variables, you can group them logically into few objects, anyway, in most cases you need to do some more than just show these variables in HTML, and this way you will have an access to them. For example:

public user = {};

ngOnInit() {
  this.user.name = this.getUserName();
  this.user.age = this.getUserAge();
  /* And you can work with "this.user" object further, not just show these values in markup */
}

public getUserName() {
    return 'Arpit';
}

publig getUserAge() {
    return 25;
}

Upvotes: 2

user4676340
user4676340

Reputation:

This happens because Angular runs this function several times through its lifecycle. He checks and updates the values of your functions and variables several times.

That's why youre seeing it several times.

Now for the "best practice" solution : I can advise you on what to use because it sounds logical, but I'm not sure it is the best practice.

Let's start with your function : 

public getUserName() {
  return 'Arpit';
}

This isn't useful. Your function is made to only return a string value and do nothing else.

In this case, since its sole purpose is to return something, you can use either a readonly variable or a getter : 

readonly username = 'Arpit';
get username() { return 'Arpit'; }

Now, about your conditions : you don't have to write it like this, in this case, you can indeed use a function. There are several cases to chose how to use a function.

The first one would be the business rule case. Let's say Arpit is an admin on his 18th birthday (business rule). In this case it gives this : 

*ngIf="isEighteenAndArpit()"

isEighteenAndArpit() { return this.user && this.user.username === 'Arpit' && this.username.age === 18; }

But if you want to make it more generic, you could for instance pass in a config object such as this : 

*ngIf="checkCondition({'username': 'Arpit', 'age': 18})"

checkCondition(config: Object) { 
  return !Object.keys(config).some(key => this.user[key] !== config[key]);
}

Upvotes: 1

Related Questions