Property 'x' does not exist on type 'y' in Angular ngIf-CodePudding

I am creating an Angular page to display the results of football matches and would like a warning message to be displayed when there are no matches. I used an ngIf to check if the array containing all matches is different from 0 but specifying in the else the ng-template to refer to gives me an error "Property 'noMatch' does not exist on type 'MainPageComponent'".

This is the piece of html code in which the matches are displayed, and if there are none, I would like the message contained in the ng-template to be displayed.

<div *ngIf="live.length > 0">
            <h1 style="color: red;">Live ScoreBoard</h1>
            <div *ngFor="let data of live">
                <div >
                    <p id="elapsed">{{ data.fixture.status.elapsed }}'</p>
                </div>
                <div >
                    <div >
                        <img id="homeLogo" src="{{ data.teams.home.logo }}">
                        <p id="homeName">{{ data.teams.home.name }}</p>
                    </div>
                    <p id="goals">{{ data.goals.home }} - {{data.goals.away}}</p>
                    <div >
                        <img id="awayLogo" src="{{ data.teams.away.logo }}">
                        <p id="homeName">{{ data.teams.away.name }}</p>
                    </div>
                </div>
                <hr>
            </div>
            <ng-template #noPartite>
                <p>No matches are scheduled today, however you can check the results of past matches <a routerLink="/matchday">here</a>and the standings here.</p>
            </ng-template>
        </div>

This is what the terminal returns

Error: src/app/Components/main-page/main-page.component.html:3:43 - error TS2339: Property 'noPartite' does not exist on type 'MainPageComponent'.

3         <div *ngIf="live.length > 0; else noPartite">
                                            ~~~~~~~~~

  src/app/Components/main-page/main-page.component.ts:7:16
    7   templateUrl: './main-page.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MainPageComponent.

CodePudding user response：

The position of noPartite template is important. You have to move out from <div> element with *ngIf as below:

<div *ngIf="live.length > 0; else noPartite">
  ...
</div>

<ng-template #noPartite>
  ...
</ng-template>

Demo @ StackBlitz