4

I'm trying to create a application with angular 2,and have a auth service in my application , my html template is somthing like this:

 <header>
    <div *ngIf="isLogin()"><a href="">profile</a></div>
    <div *ngIf="!isLogin()"><a href="">register</a></div>
    <div *ngIf="!isLogin()"><a href="">signin</a></div>
    </header>

**and this is my class :** 

@Component({
    selector: 'main-menu',
    templateUrl: '/client/tmpl/menu.html',
    directives: [ROUTER_DIRECTIVES]
})
export class Menu extends Ext {

    public items: any;

    constructor(private _util: UtilService, private _user: UserService) {
        super();


    }

    public isLogin() {

        console.log("test");  <==== my problem is here
        return this._user.authorized();

    }


}

always my functions is executing !(in my auth service i have another fuctions that they also runing) !this is for using a function inside *ngif ??!!! im worry for my resoureces and i want know its a problem or not?

  • 1
    what you want to do exactly ? obviously your function has to call every time because it is bind with binding on view so every time angular check for any change in the `isLogin`. – Pardeep Jain May 15 '16 at 12:40
  • This is like setinterval or a infinite loop!! –  May 15 '16 at 15:46
  • Please can you reformulate your post, it's not really understandable. – Romain May 15 '16 at 15:53
  • hmm as already said angular will always call the function for binding checking thts y function is being called like infinite loop\ – Pardeep Jain May 15 '16 at 15:56

1 Answers1

21

Every time Angulars change detection is run, it evaluates all bindings and therefore calls your functions to check if the view needs updating.

Using functions in bindings is discouraged. Either assign the value to a property of your component class and bind to this property instead, or use observables and the | async pipe to notify Angular about changed values.

Another option is to use ChangeDetectionStrategy.OnPush where Angular change detection is only run when an input value has changed.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    @AlirezaValizade, see Günter's other answer about that here: http://stackoverflow.com/questions/37024918/angular2-changedetection-or-observable/37025051#37025051 – Mark Rajcok May 16 '16 at 16:41
  • I've used functions for ngIf in many places in my project. Is there any risk of pages crashing due to them? Should I change them or is it fine? – sundeepg Sep 01 '17 at 13:43
  • If they don't do any actual work, just returning a simple value, they aren't too bad. Change detection with bare fields is still more efficient. If you use `OnPush`, it's even less an issue, because change detection doesn't run that frequently. If the function does even moderately expensive calculation, definitely change it into a property binding. – Günter Zöchbauer Sep 01 '17 at 14:00
  • What about using getters? Would it be any better then notmal functions? – S Panfilov Nov 23 '18 at 12:51
  • A getter is just syntactic sugar and otherwise the same as a function. – Günter Zöchbauer Nov 23 '18 at 15:00
  • What if the ngIf login is in the template? Is it better then using a function? – Udi Mazor Sep 17 '19 at 10:15
  • @UdiMazor not sure what you mean. isLogin is in the template in the question. – Günter Zöchbauer Sep 17 '19 at 15:06