• I am new to typescript and angular js.
• I tried to include another ponent 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

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

@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 ponent into my html

<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="monBtn" 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

/@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);

• I am new to typescript and angular js.
• I tried to include another ponent 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

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

@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 ponent into my html

<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="monBtn" 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./@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);

• javascript
• jquery
• html
• angular
• typescript

4 Answers 4

In this line:

this.sky.tigerStart();

You're expecting this.sky to be set to something, but it's not. That's because the this is not what you think it is; you are not in the scope you think you are in. Add a console.dir(this) right before this line, refresh the page, and check the browser console if you want to see what your this is. Then figure out some other way to resolve the object you really need there.

Mozilla Developer Network reference article for "this"

Try the following:

// *** Assign this to a variable (self)
var self = this;

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);

// *** use the self variable instead of this
    self.sky.tigerStart();

The article you mention in your ment is correct, but if you don't really understand what's is happening in the code, it will only confuse you more if you try to do what it's suggesting. You may want to study more about how variable scope works in Javascript. It's a bit confusing in the beginning, but understanding will help you get better at Javascript. I still have problems with it myself, but the way I show here, is fairly easy to understand. Just remember when you declare a variable and you declare functions at the same level (or inside those functions), you can access that variable from inside those functions (unless you create new variables with the same names inside those functions).

Looking like an object having property key tigerStart is undefined.

You can debug like this :

• First, you should make sure that an object having property key tigerStart actually returns an object and not "undefined".

Example : Suppose tiger is an object having property with key tigerStart.

{
  "tiger": {
    "tigerStart": true
  }
}

if (typeof tiger != 'undefined') {
  /* Your code es here */
}

The this keyword refers to the current context. In this case, it is the context of the object you are calling open() with.

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();

As you can see the current context is the Object fed into that.window.kendoWindow(). For your given code to work, it would need to look something like this:

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

Now this.sky exists and you can access the given function.

sky might be defined, but you are not assigning it a value before you are accessing it. Where are you assigning a value sky?

It is unclear if you mean that you are using Angular or if you mean you are using AngularJS. In the tags you have used the Angular tag. In the description you have mentioned AngularJS. These are two different things. You are also using $ which I assume is jquery. I suggest avoiding mixing jQuery with Angular or AngularJS. It will make your learning process much simpler.