How to display a variable from a typescript file to a html file using Angular?

Issue

I have the following function in a typescript file:

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 : array that holds players returned from mongoDB
• clubJoinedYear : holds year only from the date the player joined current club
• currentYear : holds current year
• years_at_club : works out how many years a player has been as a club

I want this years_at_club (int) var to be displayed in my HTML file and I am currently trying it like:

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

But this is giving me 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.

How can I get this to print on my HTML file?

Solution

If you want to access to a variable from the HTML-file, you must declare a public variable in the associated typescript file like

public years_at_club: number;

The var is only for variable on a component, as example in a method. This var-variable refers to the component instance and can‘t access from the associated HTML-file.

For the case in your for-loop, you can add every years_at_club where coming from MongoDB to a array, that looks like public years_at_club_array: number[] where you can add new items with this.years_at_club_array.push(currentYear - clubJoinedYear).

In the HTML-file, you can display the array with looping over with *ngFor.

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

Answered By - SwissCodeMen