Exploring variables in Angular2 with TypeScript

Question

Exploring variables in Angular2 with TypeScript

I have a component that I am exporting with 2 variables and 2 functions to toggle those variables (which are booleans).

However, when I trigger my function using (click), I encounter the following error:

ERROR: ReferenceError: 'landing' is not defined.

If I define 'landing' and 'portfolio' as variables using var landing = true;, I cannot evaluate them with *ngIf.

Here is the code snippet for my exported component:

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

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

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

As someone new to TypeScript and Angular2, I'm unsure of what mistake I may be making. In Angular1, I would simply access them via $scope.

typescript angular

Answer 1

Answer №1

To properly reference the properties and methods within a class, utilize 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 is important to use this since landing and portfolio are integral components of the class itself. This principle applies to both properties and methods.

When working within the component's associated template in Angular2, including the this keyword is unnecessary as Angular2 inherently searches for properties and methods within the component class during expression evaluation. Only elements connected to the component can be utilized within expressions...

Answer 2

To properly reference the properties and methods within a class, utilize 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 is important to use this since landing and portfolio are integral components of the class itself. This principle applies to both properties and methods.

When working within the component's associated template in Angular2, including the this keyword is unnecessary as Angular2 inherently searches for properties and methods within the component class during expression evaluation. Only elements connected to the component can be utilized within expressions...

Answer 3

Answer №2

Here is the solution you're looking for:

export class NavigationComponent {
    landingActive:boolean = false; // `:boolean` is optional but recommended for better code clarity
    portfolioActive::boolean = true;

    toggleLandingNav() {
       this.landingActive = true;
       this.portfolioActive = false;
    }

    togglePortfolioNav() {
       this.landingActive = false;
       this.portfolioActive = true;
    }
}

Answer 4

Here is the solution you're looking for:

export class NavigationComponent {
    landingActive:boolean = false; // `:boolean` is optional but recommended for better code clarity
    portfolioActive::boolean = true;

    toggleLandingNav() {
       this.landingActive = true;
       this.portfolioActive = false;
    }

    togglePortfolioNav() {
       this.landingActive = false;
       this.portfolioActive = true;
    }
}

Exploring variables in Angular2 with TypeScript

Answer №1

Answer №2

Similar questions

Creating an Observable from static data in Angular that resembles an HTTP request

Angular 6: Endlessly Scroll in Both Directions with Containers

Sending data from an Angular 2 application to a Spring MVC Rest API using HTTP POST method

Using the $state feature in TypeScript with Svelte 5 for defining class fields

"Implement ngx-translate to cater to multi-language support in your Angular library

Having trouble integrating NEXT AUTH with Firebase due to an error: "Cannot import statement outside

Tips for sending an Angular http post request including both data and an image:

Error when using Angular CLI: npm error! The call stack size has exceeded the limit

Angular 2, Release Candidate 5 - Dropdown form includes mysterious "phantom" choice

Children components are not re-rendered by React

Arranging elements within a card using CSS

Implementing Bootstrap 5 within Angular 14 and incorporating SCSS styling

Errors encountered when using TypeScript with destructured variables and props not being recognized

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Loading external libraries in Angular2: A step-by-step guide

Error encountered while attempting to globally install TypeScript using npm: "npm ERR! code -13"

Error encountered when trying to access Proxy Object or Object[] in MobX with TypeScript

What could be causing my application to experience slow build times when using ng serve?

Enhanced auto-completion for Nativescript Android with TypeScript

What is the best way to convert canvas data into a string in Angular once the user has made a drawing on it?