What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

Question

What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

In my TypeScript file, I have the following function:

ngOnInit() {
        if (sessionStorage['loyalPage']) {
          this.page = Number(sessionStorage['loyalPage']);
        }
    
        this.webService.getLoyalPlayers(this.page).subscribe((player_vars:any)=> {
          this.player_list= player_vars;
    
          for (let i=0; i< this.player_list.length; i++) {
            let clubJoined: Date = new Date(this.player_list[i].club_joined);
            let todayDate: Date = new Date();
    
            var clubJoinedYear = clubJoined.getUTCFullYear();
            var currentYear = todayDate.getUTCFullYear();
    
            var years_at_club = currentYear - clubJoinedYear;
          }
       })
    }

player_list: an array that contains players retrieved from MongoDB
clubJoinedYear: stores only the year when a player joined the current club
currentYear: holds the current year
years_at_club: calculates how many years a player has been at the club

I want to display the integer variable years_at_club in my HTML file and I am currently attempting it like this:

<div class="p-year">
        {{ years_at_club }}
    </div>

However, I encounter the following error:

Compiled with problems:

    ERROR

    src/app/loyal.component.html:71:24 - error TS2339: Property 'years_at_club' does not exist on type 'LoyalComponent'.

        {{ years_at_club }}
        ~~~~~~~~~~~~~

    src/app/loyal.component.ts:6:16
    6   templateUrl: './loyal.component.html',
                    ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoyalComponent.

https://i.stack.imgur.com/lw8a8.jpg

How can I resolve this issue and successfully print this value in my HTML file?

angular typescript

Answer 1

Answer №1

To access a variable from the HTML-file, you need to declare a public variable in the corresponding typescript file like this:

public years_at_club: number;

The use of var is limited to variables within a component, such as in a method. This type of variable is specific to the component instance and cannot be accessed from the linked HTML-file.

In the scenario of a for-loop, you can store each value of years_at_club retrieved from MongoDB into an array, defined as

public years_at_club_array: number[]

. New entries can be added using

this.years_at_club_array.push(currentYear - clubJoinedYear)

.

To display the array in the HTML-file, utilize a loop using *ngFor.

<div *ngFor="let item of years_at_club_array">
    <p>item</p>
</div>

Answer 2

To access a variable from the HTML-file, you need to declare a public variable in the corresponding typescript file like this:

public years_at_club: number;

The use of var is limited to variables within a component, such as in a method. This type of variable is specific to the component instance and cannot be accessed from the linked HTML-file.

In the scenario of a for-loop, you can store each value of years_at_club retrieved from MongoDB into an array, defined as

public years_at_club_array: number[]

. New entries can be added using

this.years_at_club_array.push(currentYear - clubJoinedYear)

.

To display the array in the HTML-file, utilize a loop using *ngFor.

<div *ngFor="let item of years_at_club_array">
    <p>item</p>
</div>

Answer 3

Answer №2

yearsSpentAtClub:number;

initializeComponent() {
    if (sessionStorage['loyalPage']) {
      this.page = Number(sessionStorage['loyalPage']);
    }

    this.webService.fetchLoyalPlayers(this.page).subscribe((playerData:any)=>{
      this.playerList=playerData;

      for (let i=0; i< this.playerList.length; i++) {
        let datePlayerJoined: Date = new Date(this.playerList[i].join_date);
        let currentDate: Date = new Date();

        var yearPlayerJoined = datePlayerJoined.getUTCFullYear();
        var currentYear = currentDate.getUTCFullYear();

        this.yearsSpentAtClub = currentYear - yearPlayerJoined;
      }
   })
}

Answer 4

yearsSpentAtClub:number;

initializeComponent() {
    if (sessionStorage['loyalPage']) {
      this.page = Number(sessionStorage['loyalPage']);
    }

    this.webService.fetchLoyalPlayers(this.page).subscribe((playerData:any)=>{
      this.playerList=playerData;

      for (let i=0; i< this.playerList.length; i++) {
        let datePlayerJoined: Date = new Date(this.playerList[i].join_date);
        let currentDate: Date = new Date();

        var yearPlayerJoined = datePlayerJoined.getUTCFullYear();
        var currentYear = currentDate.getUTCFullYear();

        this.yearsSpentAtClub = currentYear - yearPlayerJoined;
      }
   })
}

What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

Answer №1

Answer №2

Similar questions

Encounter an error message "Expected 0 type arguments, but received 1.ts(2558)" while utilizing useContext within a TypeScript setting

Getting a date object that is three months prior to the current date in Typescript

Issue with setting value using setState in TypeScript - what's the problem?

Why does TypeScript struggle to recognize the properties of a type within a function parameter?

What is the best way to set up TSLint to apply specific rules with one line and different rules with another line

transfer information from a Node.js server to an Angular client using the get() method

React-file-viewer shrinks any document to a compact size

What's the reason for the malfunction of the "required" attribute in my Angular form?

A step-by-step guide on importing stompjs with rollup

Why won't my code work with a jQuery selector?

Using TypeScript to convert a JSON date string into a Date object

Accessing element from view within controller in Ionic version 3.5

Error TS2322: You cannot assign a Promise<any> to a string type

Utilizing Observable to dynamically bind ngClass in Angular

Tips for Disabling ML5 Posenet

The promise was not handled properly as it was rejected with the message: "The constructor xhr2

Testing event handling in CdkDragDrop functionality

Unable to use console log in shorthand arrow function while working with Typescript

Bovine without Redis to oversee queue operations

Encountering an issue with Angular Material's MatTable when trying to set the datasource data to an interface