CODEWITHSUNDEEP
htmlangulartypescript
Tom
Tom

Reputation: 4043

Disable scrolling in typescript as soon as property is true

I have a hamburger inside of my header - as soon as it is clicked, I wan't to disable scroll - since the hamburger is moving on scroll.

I tried to set the hamburger to position: fixed. But this one changed the position of its neighbour, which looked weird.

Is there a way to realize this in typescript - so that as soon clicked is true, scrolling is disabled. Or is there a better approach?

https://stackblitz.com/edit/angular-beiajz

export class HeaderComponent implements OnInit {

  clicked = false;

  onClick(): void {
    this.clicked = !this.clicked;
  }

  constructor() { }

  ngOnInit(): void {
  }


}


<div class="container-fluid mobile position-absolute">

  <div class="row m-0 w-100">

    <div class="col-6 offset-3 justify-content-center d-flex">
      <a class="align-self-center" routerLink="">
        <h1>NØREBRO STUDIOS</h1>
      </a>
    </div>

    <div class="col-3">
      <button class="hamburger hamburger--collapse" (click)="onClick()" [class.is-active]="clicked" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    </div>

    <div class="container-fluid position-fixed min-vh-100 px-0 slide-in" [class.get-active]="clicked">

    </div>

  </div>

</div>

Upvotes: 0

Views: 1177

Answers (1)

gcodess
gcodess

Reputation: 160

One of the way is passing a event from the child to parent whenever click is made on the hamburger menu and changing the parent class CSS

in app.component.html

<app-test (hamburgerClick)="hamburgerClickEvent($event)"></app-test>

<div [ngClass]="{
  'container-fluid-overlay':  overlayFlag === true,
  'container-fluid':  overlayFlag === false }">

 </div>

in app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  overlayFlag = false; // overlay flag..onload overlay is hidden

 public hamburgerClickEvent(e:boolean):void{
   this.overlayFlag= e;
 }
}

in app.component.css

  .container-fluid {
     min-height: 200vh;
   }
  .container-fluid-overlay {
     height: auto;
   }

in test.component.ts

import { Component, OnInit , Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

 @Output() hamburgerClick = new EventEmitter();//emitter
      clicked = false;

      onClick(): void {
        this.clicked = !this.clicked;
        this.hamburgerClick.emit(this.clicked); //emitting clicked event to parent
      }


  constructor() { }

  ngOnInit(): void {
  }
}

Hope it helps :)

Upvotes: 1

Related Questions