How to change CSS styling from within Angular 2 Component


Tags: html,css,angular2,menu

Problem :

I am attempting to make a Vertical Menu with dropdowns. I have it working currently by using 'hover' in CSS but I want to make it so that a user can click a dropdown and the submenu will stay open even when a user is not hovering over it.

The problem I am running into is that, when I click the Statistics dropdown, it will actually make it into the method showStatMenu(), but the submenu will not actually open/become visible. Which makes me assume that the code within the showStatMenu() is wrong for Angular 2 to actually change the CSS.

*And yes I realize that showStatMenu() is not toggling open and closed, I just want it to open first and then worry about toggling it open and closed later

HTML

<div class="dashboard">
  <ul class="mainmenu">
    <li><a (click)="showStatMenu()">Statistics <span class="right"><i class="fa fa-angle-down"></i></span></a>
      <ul class="submenu" id='stat'>
        <li *ngFor="let dashboard of dashboards"><a class="indent" *ngIf="dashboard.id == 1" (click)="gotoDetail(dashboard)">Team</a></li>
        <li *ngFor="let dashboard of dashboards"><a class="indent" *ngIf="dashboard.id == 2" (click)="gotoDetail(dashboard)">Player</a></li>
      </ul>
    </li>
  </ul>
</div>

TS

import { Component, OnInit } from '@angular/core';
import { Dashboard } from './dashboard';
import { DashboardService } from './dashboard.service';
import { Router } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  // Took out init method and other irrelevant code

  showStatMenu(){
    document.getElementById('stat').style.display = 'block';
    document.getElementById('stat').style.width = '200px';
  }
}

CSS (May be useful, but I don't think it is the problem)

html, body {
  font-family: Arial, Helvetica, sans-serif;
}

.navigation {
  width: 300px;
}

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
}

.mainmenu a {
  display: block;
  background-color: #d7dfea;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.mainmenu a:hover {
  background-color: #5a98fc;
  cursor: hand;
}

/*.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}*/ /*Hiding hover option*/

.submenu a {
  background-color: #9a9c9e;
  text-indent: 20px;
}

.submenu a:hover {
  background-color: #55d3ed;
  cursor: hand;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

.right{
  float: right;
}

Thanks for the help, this has been bugging me for way longer than it should!



Solution :

Try to avoid direct DOM access from code in Angular2. Rather use bindings and directives like ngStyle:

export class DashboardComponent implements OnInit {
  showStat:boolean = false;
}
<div class="dashboard">
  <ul class="mainmenu">
    <li><a (click)="showStat = !showStat">Statistics <span class="right"><i class="fa fa-angle-down"></i></span></a>
      <ul class="submenu" [ngStyle]="{'display': showStat ? 'block' : 'none, 'width': showStat ? '200px' : '0'}" >
        <li *ngFor="let dashboard of dashboards"><a class="indent" *ngIf="dashboard.id == 1" (click)="gotoDetail(dashboard)">Team</a></li>
        <li *ngFor="let dashboard of dashboards"><a class="indent" *ngIf="dashboard.id == 2" (click)="gotoDetail(dashboard)">Player</a></li>
      </ul>
    </li>
  </ul>
</div>

    CSS Howto..

    How to reset a css animation class using jquery?

    How to get relative CSS from photoshop artboard?

    How to align 'n' divs horizontally WITH margin/padding?

    How can I modify a CSS class using JavaScript?

    How to increase size of something in class, but not other elements in class?

    How can I increase the size of twitter bootstrap carousel navigation arrows

    How to change my online store template in dbdirector ecommerce platform

    How does gmail preserve copy and pasted web content, maintaining the attached CSS?

    html - how to make images stay on certain part of background

    django render_to_response how to send special characters

    How to get rid of spaces between images in CSS?

    How is it possible to align css sprites horizontally?

    How to center list of links in a straight line. CSS

    How to make objects move with CSS?

    How to make a CSS file valid?

    How to add a background to a boostrap grid row (including padding!)?

    How to highlight syntax inside
    tag?

    How to change expand div after click and collapse it after another click?

    bootstrap modal disappear immediately after showing

    How do you get multiple views in one window like JSFiddle does [closed]

    How to center this flip card example?

    what is shape-id and how can I find it in a css file?

    CSS - How to add dot between navigation title

    How to change accordion css to plain white?

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    How to center navbar elements vertically (Twitter Bootstrap)?

    How to Change main menu color?

    how to make background-image included via a “class” responsive

    How to size a content div to cover the entire content area in jQuery Mobile

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?