Template reference property is missing

Question

I am converting my angular 11 project to angular 12 and there are some problem I am facing. In one component which is ngx-nestable its working fine in angular 11 but as I have updated it to version 12 it's showing me some error please check screen shot.

This is my .ts file code:

    import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
    import { NestableSettings } from './lib/nestable.models';

    @Component({
      selector: 'app-nestable',
      templateUrl: './nestable.component.html',
      styleUrls: ['./nestable.component.css']
    })
    export class NestableComponent implements OnInit {
        
        

      public idCount = 13;
      public options = {
        fixedDepth: false
      } as NestableSettings;
      public list = [
        { 'id': 1 },
        {
          'expanded': true,
          'id': 2, 'children': [
            { 'id': 3 },
            { 'id': 4 },
            {
              'expanded': false,
              'id': 5, 'children': [
                { 'id': 6 },
                { 'id': 7 },
                { 'id': 8 }
              ]
            },
            { 'id': 9 },
            { 'id': 10 }
          ]
        },
        { 'id': 11 },
        {
          'id': 12,
          'children': [
            { 'id': 13 }
          ]
        },
        { 'id': 14 },
        { 'id': 15 }
      ];

      constructor(
        private el: ElementRef,
        private renderer: Renderer2
      ) {
        this.renderer.listen(this.el.nativeElement, 'listUpdated', e => {
          this.list = e.detail.list;
        });
      }

      public pushItem() {
        this.list.push({ id: ++this.idCount });
        this.list = [...this.list];
      }

      public toggleFixedDepth() {
        this.options.fixedDepth = !this.options.fixedDepth;
      }

      public drag(e: any) {
        console.log(e);
      }

      public drop(e: any) {
        console.log(e);
      }

      public onDisclosure(e: any) {
        console.log(e);
      }
      
      ngOnInit(): void {
      }

    }

and this is my html code

<ngx-nestable class="ngx-nestable col-lg-6"
    (drag)="drag($event)"
    (drop)="drop($event)"
    (disclosure)="onDisclosure($event)"
    [(list)]="list"
    #nestable
    [options]="options"
    [template]="itemTemplate"
    fxFlex="50">
</ngx-nestable>
                            
                            

<ng-template #itemTemplate let-row>
    <button mat-icon-button [ngxNestableDragHandle]="row">
        <mat-icon>drag_handle</mat-icon>
    </button>
    <button mat-icon-button  *ngIf="row.item.children && row.item.children.length; else empty_item" [ngxNestableExpandCollapse]="row">
        <mat-icon>{{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}</mat-icon>
    </button>
    <div>Item: {{row.item.id}}</div>
</ng-template>

Please tell me what should I change or add in the code file so that it will start working. I am trying to find a solution for many days but to no avail.

Thanks

Answer 1

This problem is resolved by just adding the below code in template file check screenshot

Thanks