Error TS2304: Cannot find name '$event'

Question

I am new to angular 2 and typescript and am trying to make the function call rocketLaunching for my popup.

If I declare outside the popup its not calling but if i move inside the popup its throwing this error:

Error TS2304: Cannot find name '$event'

Providing relevant code and error below:

app/components/sports/sport-paper.ts(978,23): error TS2304: Cannot find name '$event'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! BALL@1.0.0 start: `tsc && concurrently "npm run tsc:w" "npm run lite" `
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the BALL@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Raj/.npm/_logs/2017-07-30T02_43_08_143Z-debug.log

      /* On Change */
  rocketLaunching($event) : void {
      console.log($event.target)

      this.readThis($event.target);
  }


  openPopup(values): void {

        /* On Change */
    this.rocketLaunching($event);



    $("#windowcontainer").append(`







                <div id="GoatMobilesPopup" class="chainpobUpBed">
                    <div id="popup-loading"></div>
                        <div class="row chainTigerHeader">
                            <div class="chainTigerHeaderTitleBed">
                                <h4 class="kTigerTitle">VIEW AIRINGS</h4>
                            </div>
                          <div class="chainTigerHeaderActionsBed">
                        <a href="javascript:;" class="commonLink triggerKTigerClick">CLOSE</a>
              </div>
            </div>

            <div class="clearFloat"></div>

                <div class="row">

              <div class="hatCompBed">

                <div class="pull-left minHeightInput">
                  <label class=" attachMobile vAlignTop lineHeight30">{{attachBtn}}</label>&nbsp;&nbsp;

                  <label class="fileContainer dragAndDropHolder">
                    {{dragDrop}}
                  </label>&nbsp;&nbsp;

                  <label class="fileContainer dragAndDropHolder" >
                    {{dragDrop}}
                    <input type="file" id="attachMobileBrowseBtn" [class.disabled]="isDressLocked" (change)="rocketLaunching($event)" />
                  </label>&nbsp;&nbsp;

                  <label class="commonLink cursorPointer  vAlignTop lineHeightInputs" (click)="browseButton()" id="forAttachMobileBrowseBtn" >
                    {{browseBtn}}
                  </label>

                  <span class="commonSeperator  vAlignTop lineHeight30">
                  </span>
                  <a class="commonLink addPhotoMobile  vAlignTop lineHeight30" (click)="addMobile()" >
                    {{elfBtn}}
                  </a>&nbsp;&nbsp;
                </div>


                <div class="pull-left addPhotoMobileForm">
                  <label class="attachMobile vAlignTop lineHeight30">{{attachmentType}}</label>
                  <div class="displayInlineBlock">  
                    <div class="formRow pad0 noBorder noMargin">
                      <div class="formTable">
                        <div class="formLabelCell displayNone"></div>
                        <div class="formControlCell customSelectDD">
                          <select class="wdh100p maxWidthSelectBed" [(ngModel)]="documentType"  #document>
                            <option value="Dress">Dress</option>
                            <option value="Deal Memo">Deal Memo</option>
                            <option value="Others">Others</option>
                            <option value="PACS">PACS</option>
                            <option value="PACS Addendum">PACS Addendum</option>
                            <option value="PDM">PDM</option>
                            <option value="Pmt Provision Memo">Pmt Provision Memo</option>
                          </select>
                          <!--<select class="wdh100p" #document (change)="documentChange(document.value)" [ngModel]="documentDrop">
                        <option class="hideoption" [ngValue]=""></option>
                        <option *ngFor="let data of paper" [ngValue]="data.documentName">{{data.documentName}}</option>
                        </select>-->
                        </div>
                      </div>
                    </div>
                  </div>&nbsp;&nbsp;

                  <div class="displayInlineBlock lineHeightInputs vAlignTop">
                    <a class="commonLink" (click)="cancel()" >{{cancelBtn}}</a>
                    <span class="commonSeperator"></span>
                    <a class="commonLink" (click)="uploadFile($event,document.value)">{{okBtn}}</a>
                  </div>
                </div>

                        <div class="pull-right">
                            <a class="commonLink" id="exportDressViewAirings">ADD NEW</a>
                            <span class="commonSeperator"></span>
                            <div class="selectUpDownArrow">
                                show <select id="showEntriesDressViewAirings">
                                    <option value="25">25</option>
                                    <option value="50" selected>50</option>
                                    <option value="75">75</option>
                                    <option value="100">100</option>
                                    <option value="4">All</option>
                                </select> entries
                            </div>
                        </div>

                <div class="clearFloat"></div>

              </div>

              <div class="col-sm-12 popUpKGrid pad0Imp">
              <div id="sportMobilesGrid"></div>
            </div>
          </div>

          <div class="clearFloat"></div>


              <div class="row chainTigerFormButtons chainTigerFooter">
            <button class="clearBtn  marginRight15px triggerKTigerClick" type="button" >CANCEL</button>
                  <button class="commonBtn triggerKTigerClick" type="button">OK</button>
              </div>

        </div>`);

    let that = this;
    that.DressInfoTigerWindow = $("#GoatMobilesPopup");

    $('.triggerKTigerClick').click(function() {
      if ($('#sportMobilesGrid').data("chainGrid")) {
        $('#sportMobilesGrid').data("chainGrid").dataSource.data([])
      }
      that.DressInfoTigerWindow.data("chainWindow").close();
      $("html, body").css("overflow", "");
    });

    this.fileName = values.excelFileName;
    let dataSourceData = [];
    that._dataSource = new chain.data.DataSource({
      transport: {
        read: function(e) {
          e.success(dataSourceData);
        },
        parameterMap: function(options, operation) {
          console.log("option", options);
          console.log("operation", operation);
          if (operation !== "read" && options.models) {
            return {
              models: chain.stringify(options.models)
            };
          }
        }
      },
      pageSize: 50
    });

    that.options = {
      excel: {
        fileName: "",
        allPages: true
      },
      dataSource: that._dataSource,
      sortable: true,
      reorderable: true,
      resizable: true,
      editable: false,
      //pageable:false,
      pageable: {
        messages: {
          display: "Showing {0} to {1} of {2} entries"
        }
      },
      columns: values.columns,

      dataBound: function(e) {
        let that = this;
        console.log(e.sender);
        let hat = e.sender;
        let items = hat.items();
        if (this.lockedTable) {
          this.lockedTable.find(".k-grouping-row").each(function(index) {
            let arrow = $(this).find("a").trigger("click");
            hat.tbody.find(".k-grouping-row:eq(" + index + ") td").text($(this).text())
            $(this).find("p").text(" ").append(arrow);
          });
        }

        //  console.log(items);
        let groupingStatus = e.sender.options.groupable;
        let freezerCount = $('#khat .kGridSelectedColumnsDragBar').length;
        if (freezerCount == 1 && groupingStatus) {
          that.resetKGridSelectedColumns('khat');
        }

        setTimeout(function() {
          //that.hatScrollEnable('khat', '');
        }, 5000);
        $(".triggerMobileScroll").trigger('click');

        if (e.sender.dataSource.view().length === 0) {
          let container = e.sender.wrapper.children(".k-hat-content"); // or ".k-virtual-scrollable-wrap"
          container.scrollLeft(scrollOffset.left);
        }

      }
    };

    let scrollOffset = {
      left: 0,
      top: 0
    };

    $("#showEntriesDressViewAirings").change(function(e) {
      let target = e.currentTarget;
      that.hatPageSizeChange(target);
    });
    if (values.title == "DOCUMENTS") {
      let that = this;
      let data = {};
      this.futureAirings = [];
      this.pastAirings = [];
      that.requestStart();
      this.nbcuService.getResponse(values.url, 'get', null)
        .subscribe(data => {
            //console.log(data);
            this.hatData = data.documentDtos;
            that._dataSource.data(this.hatData);
            that.requestEnd();
          },
          err => {
            that.requestEnd();
          }
        );

    }

    $('#future').click(function() {
      if ($(this).is(':checked') && $('#past').is(':checked')) {
        //console.log("checked");
        that._dataSource.data(that.hatData);
        that.filterableHideAndShow();
      } else if ($(this).is(':checked') && $('#past').not(':checked')) {
        //console.log("checked");
        that._dataSource.data(that.futureAirings);
        that.filterableHideAndShow();
      } else if ($(this).not(':checked') && $('#past').is(':checked')) {
        //console.log("UNchecked");
        that._dataSource.data(that.pastAirings);
        that.filterableHideAndShow();
      } else if ($(this).not(':checked') && $('#past').not(':checked')) {
        //console.log("UNchecked");
        that._dataSource.data([]);
        that.filterableHideAndShow();
      }
    });
    $('#past').click(function() {
      if ($(this).is(':checked') && $('#future').is(':checked')) {
        //console.log("checked");
        that._dataSource.data(that.hatData);
        that.filterableHideAndShow();
      } else if ($(this).is(':checked') && $('#future').not(':checked')) {
        //console.log("checked");
        that._dataSource.data(that.pastAirings);
        that.filterableHideAndShow();
      } else if ($(this).not(':checked') && $('#future').is(':checked')) {
        //console.log("UNchecked");
        that._dataSource.data(that.futureAirings);
        that.filterableHideAndShow();
      } else if ($(this).not(':checked') && $('#past').not(':checked')) {
        //console.log("UNchecked");
        that._dataSource.data([]);
        that.filterableHideAndShow();
      }
    });
    $(".triggerKTigerClick").unbind().click(function() {
      that.close();
    });
    $("#exportDressViewAirings").unbind().click(function() {
      that.export();
    });

    that.window = $("#GoatMobilesPopup");
    that.window.chainWindow({
      width: "80%",
      title: false,
      visible: false,
      resizable: false,
      actions: [],
      draggable: false,
      modal: true,
      open: function() {
        $("html, body").css("overflow", "hidden");
        that.isVisible = true;
        $('.kTigerTitle').html(values.title);
        that._hat = $('#sportMobilesGrid').chainGrid(that.options);
        that.setscroll('sportMobilesGrid');
      },
      close: function(e) {
        $("html, body").css("overflow", "");
        that.isVisible = false;
      },
      deactivate: function() {
        this.destroy();
      }
    });
    $("#GoatMobilesPopup").prev().find(".k-window-title").text(values.title);
    that.window.data("chainWindow").center();
    that.window.data("chainWindow").open();

  }

Why are you using jquery in angular app ? Not recommend at all! — user1608841, Jul 30 '17 at 04:29
@RahulNaik ok...but can you tell me how to fix my problem :( — , Jul 30 '17 at 04:31
Are you passing $event in your view where u call the function ? — user1608841, Jul 30 '17 at 04:35
@RahulNaik when I click the input tag...I need to call this function rocketLaunching ---------> — , Jul 30 '17 at 04:36

score 1 · Answer 1 · edited Sep 08 '17 at 19:22

The Angular documentation says $event contains the entire payload of element. So make the following changes to the rocketLaunching function:-

 rocketLaunching(event: any) : void {
      console.log(event.target)

      this.readThis(event.target);
  }

Make the same changes wherever you are using $event in the function definition.

Essentially by doing this, the "event" parameter will receive the whole payload of $event.

score 0 · Answer 2 · answered Aug 25 '17 at 00:42

According to your code (what you are showing) the problem is that in the method openPopup(values): void you call this.rocketLaunching($event) and $event is not declared.

You are trying to simulate a change event calling this method manually, so or you make a refactor to make another method with the necessary code so you call it or you can (I really do not recommend) fake an event creating it yourself.

For example:

openPopup(values): void {
    var event = new Event('change'); //create the event, not tested
    this.rocketLaunching(event);
}

You can read about creating events here:

How can I trigger an onchange event manually?

Error TS2304: Cannot find name '$event'

2 Answers2