Error "TS2339 Property 'elseblock' does not exist on type ''"

Question

I'm trying to do an If Else with Angular:

<form [formGroup]="searchForm">
    <input formControlName="search"  placeholder="search show"/>
</form>
<div *ngIf="searchForm.value.search; else elseblock">
    search 
</div> 

<ng-template #elseblock>
   Listing
</ng-template>

But Typescript gives me an error:

error TS2339: Property 'elseblock' does not exist on type ''.

How can I fix it?

Here my TS file :

 export class ShowListComponent implements OnInit{
      searchForm :any;
      showsList:any = [];
    
      constructor(
        private showsService: ShowsService,
        private router : Router,
        private formBuilder: FormBuilder
      ) {
        this.searchForm = this.formBuilder.group({
          search: '',
        });
      }
    
      ngOnInit(): void {
        this.showsService.getShowsList()
          .subscribe(response => {
            this.showsList = response;
        })
      }
    
      goToShowDetail(show: any) {
        let title:string = show.name.replaceAll(' ','-').toLowerCase()
        this.router.navigate([this.router.url, show.id, title])
      }
    
      
    }

Answer 1

This is the right syntax for the ngIf else block in angular:

<form [formGroup]="searchForm">
  <input formControlName="search"  placeholder="search show"/>
</form>
<div *ngIf="!searchForm.value.search; else elseblock">
  search
</div>

<ng-template #elseblock>
  Listing
</ng-template>

What was wrong?

<form [formGroup]="searchForm">
  <input formControlName="search"  placeholder="search show"/>
</form>
<div *ngIf="searchForm.value.search else elseblock">. ====> You missed the semi colon here
    search 
<div> ====> You should use a closing tag instead (</div>)

<ng-template #elseblock>
   Listing
<ng-template>  ====> Also here, it should be a closing tag (</ng-template>)

Beside that, everything looks just fine.

Answer 2

'elseblock' does not exist on type Angular

Usually Suggests that TypeScript is unable to find a property named 'elseblock' on the type it expects.

To use the else block with ngIf in Angular, you need to make sure that you are using the correct syntax. Here's an example of how you should use ngIf with else:

<div *ngIf="condition; else elseBlock">
  <!-- Content to be displayed when condition is true -->
</div>
<ng-template #elseBlock>
  <!-- Content to be displayed when condition is false -->
</ng-template>

Make sure that you have declared the elseBlock template reference variable correctly and that you are using the correct syntax in your Angular component template.

Here's how you would declare the condition in your component:

In your component.ts:

condition: boolean = true; OR condition: boolean = false;

In your template.html :

<div *ngIf="condition; else elseBlock">
  <!-- Content to be displayed when condition is true -->
  <p>This is displayed when condition is true.</p>
</div>
<ng-template #elseBlock>
  <!-- Content to be displayed when condition is false -->
  <p>This is displayed when condition is false.</p>
</ng-template>