Skip to content
Advertisement

Angular set slide in panel with routing

Stackblitz demo: https://stackblitz.com/edit/angular-ivy-tf3pip?file=src%2Fapp%2Fapp.component.html

I’m trying to set this slide-in panel with routing in Angular 2+, this code works fine in a flat html but i need to trigger the panel with Angular routing, so if i go to the route: ‘slideinpanel’ the panel should open. What i’ve been trying is to trigger the panel when the slideinpanel component is loaded. The code is in the stackblitz link. Any advice? Thanks in advance.

Advertisement

Answer

Implement the ngAfterInit in the sidepanle component to load the function that showing the panel :

      export class SlideInPanelComponent implements AfterViewInit {
      ngAfterViewInit(): void {
setTimeout(this.slideInPanelFunction, 50);
      }
}

then in the function call the addClass function when you call the function

  slideInPanelFunction() {
    debugger;
    var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
    if (panelTriggers.length > 0) {
      for (var i = 0; i < panelTriggers.length; i++) {
        (function(i) {
          var panelClass =
              'js-cd-panel-' + panelTriggers[i].getAttribute('data-panel'),
            panel = document.getElementsByClassName(panelClass)[0];
          // open panel when clicking on trigger btn
         addClass(panel, 'cd-panel--is-visible'); 
        //  panelTriggers[i].addEventListener('click', function(event) {
         //   event.preventDefault();
        //    addClass(panel, 'cd-panel--is-visible');
      //    });
          //close panel when clicking on 'x' or outside the panel
          panel.addEventListener('click', function(event) {
            if (
              hasClass(event.target, 'js-cd-close') ||
              hasClass(event.target, panelClass)
            ) {
              event.preventDefault();
              removeClass(panel, 'cd-panel--is-visible');
              console.log(i);
            }
          });
        })(i);
      }
    }

    //class manipulations - needed if classList is not supported
    //https://jaketrent.com/post/addremove-classes-raw-javascript/
    function hasClass(el, className) {
      if (el.classList) return el.classList.contains(className);
      else
        return !!el.className.match(
          new RegExp('(\s|^)' + className + '(\s|$)')
        );
    }
    function addClass(el, className) {
      if (el.classList) el.classList.add(className);
      else if (!hasClass(el, className)) el.className += ' ' + className;
    }
    function removeClass(el, className) {
      if (el.classList) el.classList.remove(className);
      else if (hasClass(el, className)) {
        var reg = new RegExp('(\s|^)' + className + '(\s|$)');
        el.className = el.className.replace(reg, ' ');
      }
    }
  }

then you can handle the close function to route to the hello component

see the updated i made https://stackblitz.com/edit/angular-ivy-ncbylz

Advertisement