current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I am exporting a component that has 2 variables, and 2 functions to change those variables (which are booleans).

Now when I trigger my function with (click) I get the error:

ORIGINAL EXCEPTION: ReferenceError: landing is not defined

but If I define landing and portfolio as variables ie var landing = true; I can't evaluate them with *ngIf

This is the export of my component:

export class NavigationComponent {
    landing = false;
    portfolio = true;

    changeMiniNavLanding = function() {
       landing = true;
       portfolio = false;
    }

    changeMiniNavPortfolio = function() {
       landing = false;
       portfolio = true;
    }
}

I am new to typescript and Angular2 and have no idea what I'm doing wrong. In Angular1 I'd just acces them with $scope.

share|improve this question
up vote 1 down vote accepted

You need to use the this keyword:

export class NavigationComponent {
  landing = false;
  portfolio = true;

  changeMiniNavLanding() {
    this.landing = true;
    this.portfolio = false;
  }

  changeMiniNavPortfoliofunction() {
    this.landing = false;
    this.portfolio = true;
  }
}

It's because landing and portfolio are part of the class (properties). It's the same for methods.

Within the template associated with the component, you don't need the this keyword since Angular2 will automatically look into the properties and methods of the component class when evaluating expressions. Only elements associated with the component can be used in expressions...

share|improve this answer
up vote 1 down vote

This should do what you want:

export class NavigationComponent {
    landing:boolean = false; // `:boolean` is not necessary but improves feedback from the IDE 
    portfolio::boolean = true;

    changeMiniNavLanding() {
       this.landing = true;
       this.portfolio = false;
    }

    changeMiniNavPortfolio() {
       this.landing = false;
       this.portfolio = true;
    }
}
share|improve this answer
1  
once landing variable initialize with false/true value(IDE will consider it as a bool), so anyways IDE will provide tooling for it.. but having datatype with declaration is good to have – Pankaj Parkar Mar 30 at 9:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.