Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Angular Basics Angular Components Data Binding

Andrew Dibb
Andrew Dibb
7,722 Points
Posted by Andrew Dibb
Andrew Dibb
7,722 Points

Error when adding click event to component template

I receive this error in the console when I click the h2 element.

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 caused by: Cannot read property 'length' of undefined

Along with a few more errors. I followed along with the video exactly. Anyone else have this issue?

4 Answers

Nathan Brenner
Nathan Brenner
35,844 Points
Nathan Brenner
Nathan Brenner
35,844 Points

In the changeEmoji method, you should have:

this.emoji.length

and you should have an emoji property defined on the AppComponent class like:

emoji = ['?', '?', '?', '?'];

You could also replace that with some static value, like 4.

Miguel López
Miguel López
7,055 Points
Miguel López
Miguel López
7,055 Points

Hi Mark.

When you typed "Math" visual studio code added automatically at the top of your code:

import { Math } from 'core-js/library/web/timers';

wich refers to another Math object and not the Math global object. Just delete that import statement. (this happened to me haha)

Ryan Moody
Ryan Moody
20,498 Points
Ryan Moody
Ryan Moody
20,498 Points

Check your code again. Worked fine for me.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Hi Andrew,

Make sure that emoji is defined (as an array assigned to emoji) within the appComponent class like so:

export class AppComponent {
    emoji = ['?', '?', '?', '?'];
    activeEmoji: string;
    changeEmoji() {
        this.activeEmoji = this.emoji[Math.floor(Math.random() * this.emoji.length)];
    }
}

Hope that helps:-)