typeError: Cannot read property 'tigerStart' of undefined

gistfile1.txt

- I am new to typescript and angular js.
- I tried to include another component code into my code.
- which is baby.js code into my code
- but I am getting an error. TypeError: Cannot read property 'tigerStart' of undefined
- can you guys tell me how to fix it.
- providing my code below

<!-- language-all: lang-or-tag-here -->


    TypeError: Cannot read property 'tigerStart' of undefined
        at init.open (pen-pencil.ts:1270)
        at init.trigger (kendo.all.min.js:25)
        at init.open (kendo.all.min.js:45)
        at Penguin.openPopup (pen-pencil.ts:1286)
        at penguin.pencilClicked (headset.ts:689)
        at _View_penguin4._handle_click_45_0 (penguin.ngfactory.js:4087)
        at eval (core.umd.js:9698)
        at eval (platform-browser.umd.js:1877)
        at eval (platform-browser.umd.js:1990)
        at ZoneDelegate.invoke (zone.js:203)

  **including tigerStart method into whole js code**
 
<!-- language-all: lang-or-tag-here -->

  @ViewChild(sports) public sky: sports;

    that.window = $("#PenguinPopup");
    that.window.kendoWindow({
      width: "60%",
      title: false,
      visible: false,
      resizable: false,
      actions: [],
      draggable: false,
      modal: true,
      open: function() {
        $("html, body").css("overflow", "hidden");
        that.isVisible = true;
        $('.kPopUpTitle').html(values.title);
        this.sky.tigerStart();

 **including fish component into my html**

<!-- language-all: lang-or-tag-here -->

    <div class="clearFloat"></div>
    <ul class="kendu-custom-contextmenu" id="context-menuFinancialSearch">
      <li class="kPopUpBtnTriple">View Details</li>
      <li class="kPopUpBtnTriple">Manage Documents</li>
    </ul>
    
    <financeLeftSlider (savedSearchData)='getSaveEvent($event)'></financeLeftSlider>
    
    <Fish></Fish>
    <Penguin (documentCount)='getDocumentEvent($event)'></Penguin>
    <sports></sports>
    
    <div class="searchNameRequiredPopup">
      <div class="pipepobUpBox pipeWindow kPopupConfirmationBox">
        <div class="row pipePopUpGridCollection pipePopUpContent lineHeightInputs">
          <div class="pipeContent">Please enter the search name.</div>
        </div>
        <div class="clearFloat"></div>
        <div class="row pipePopUpFooter textAligncenterImp">
          <!-- <button class="commonBtn" type="button" id ="deleteDocumentYes">Yes</button> -->
          <button class="clearBtn" type="button" id="searchNameRequiredBtn">Ok</button>
        </div>
        <div class="clearFloat"></div>
      </div>
    </div>

    


    
 baby.html

    <div id="baby"></div>
    <div id="baby1"></div>


baby.js

    @Component({
      moduleId: module.id,
      selector: 'sports',
      templateUrl: 'sports.html'
    })

    export class Star {
    
      tigerStart(): void {
        kendo.ui.sky($("#baby"), true);
      }
      tigerEnd(): void {
        kendo.ui.sky($("#baby"), false);
    
      }
    
      tigerStart1(): void {
        kendo.ui.sky($("#baby1"), true);
      }
      tigerEnd1(): void {
        kendo.ui.sky($("#baby1"), false);
      }
    
    }



   

  - when I print this I didn't see sky, so I read the medium form and tried with fat arrow and bind but still I am not able to achived it.
  - in the view child I am using sports
  -  can you tell me how to fix it.
  - so that for future it will be helpful


**https://medium.com/@thejasonfile/es5-functions-vs-es6-fat-arrow-functions-864033baa1a**

  

    @ViewChild(sports) public sky: sports;
    **- tried with fat arrow**
    open: () => {
    
    **- tried with bind**
            this.sky.tigerStart().bind(this);