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?

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?

• javascript
• typescript
• angular

• 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 Commented May 15, 2016 at 12:40
• This is like setinterval or a infinite loop!! – user5738822 Commented May 15, 2016 at 15:46
• Please can you reformulate your post, it's not really understandable. – Romain Commented May 15, 2016 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 Commented May 15, 2016 at 15:56

1 Answer 1

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.