CODEWITHSUNDEEP
angular
Aidan01
Aidan01

Reputation: 35

Cannot read property 'toggle' of undefined

Trying to implement a three bar menu icon that turns into an "X" when clicked. Not sure why toggle is undefined. Can someone please explain where I have been going wrong?

from app.component.ts:

import { Component} from '@angular/core';
    @Component({
      selector: 'app-root',
      template: ` 
      <body>
        <div class ='bg'> <br>
        <div class='interactivemenu' (click)="cool(this)"> 
        <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      </div>
        <div id='menubar'>
            <ul class='menu'>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='home' [routerLink]="['/home']">Home</a></li>
              <li><a class='nav-link' routerLinkActive='active'class="menu" id='resume' [routerLink]="['/resume']">Resume</a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='projects'[routerLink]="['/projects']">Projects</a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='about'[routerLink]="['/about']">About </a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='contact'[routerLink]="['/contact']">Contact </a></li>
              </ul>
             </div><br>
        <div id='slideshow'> SLIDESHOW</div>
        <div class='container'>
          <router-outlet></router-outlet>
        </div>
        <div id= 'footer'>
        <a href='http://www.instagram.com'> <img src= './assets/instagram-vector-png--400.png' alt='instagram'></a>
        <a href='http://www.twitter.com'> <img src= './assets/Twitter_Social_Icon_Rounded_Square_Color.png' alt='twitter' class="twitter"></a>
         <a href='http://www.facebook.com'><img src= './assets/f_logo_RGB-Hex-Blue_512.png' alt='facebook' class="facebook"></a>
        </div>
        </div>
        </body>
        `,
      styleUrls: ['./app.component.css']
    }


    )


    export class AppComponent {
        pageTitle = "Practice";

        cool (x:any){
         x.classList.toggle("change");
        }
    }

Upvotes: 0

Views: 698

Answers (1)

Damian C
Damian C

Reputation: 2171

You'll probably want to avoid modifying the DOM at all possible. In addition, it'll be easier to detect and react to these changes using ngClass.

Give this a try:

@Component({
        selector: 'app-root',
        template: `
            <body>
            <div class='bg'><br>
                <div class='interactivemenu' (click)="toggleMenu()" [ngClass]="[{'change': menuActive}]">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
                <!-- the rest of your page -->
            </div>
            </body>
        `,
        styleUrls: ['./app.component.css']
    }
)

export class AppComponent {
    public pageTitle = 'Practice';
    public menuActive: boolean = false;

    public toggleMenu() {
        this.menuActive = !this.menuActive;
    }
}

Upvotes: 1

Related Questions