Thank you for any assistance, I realize this may be a beginner question... but I seem to be missing something and my TypeScript code is error-free.
My goal is simple: I want to track which Main Menu Item is currently selected.
To achieve this, I have bound my HTML using variables in the following way: (if there's a direct way to bind an enum value, please let me know).
<div id ="menu_popular" class="{{menuClass}}" style="left:90px; top:368px;">
Menu Item
</div>
Next, I thought of updating my code declarations by calling a function selectMenu like so:
import {Component} from '@angular/core';
import {MainMenuItem} from './domain';
@Component ({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent
{
title = 'Angular App';
menuClass = 'div.menu_text';
}
let selectedItem: any = MainMenuItem.POPULAR;
const selectMenu = function (item: MainMenuItem) {
console.log ('Switching Selected Menu from: ' + selectedItem + ' to: ' + item);
selectedItem = item;
console.log('Assigned');
console.log(this.AppComponent.menuClass);
if (item === MainMenuItem.YEIIIII)
{
...
selectMenu (MainMenuItem.YEIIIII);
However, when I tried that, I encountered a runtime error stating Cannot read property 'AppComponent' of undefined.
It seems I'm unable to access the values of AppComponent in any way,
console.log(this.AppComponent.menuClass);
or
console.log(this.menuClass);
What am I missing here?
Thanks!