Role para o elemento ao clicar em Angular 4

Quero poder rolar para um destino quando um botão for pressionado. Eu estava pensando algo assim.

<button (click)="scroll(#target)">Button</button>

E no meu component.ts método parecido.

scroll(element) {
    window.scrollTo(element.yPosition)
}

Sei que o código acima não é válido mas apenas para mostrar o que estava pensando. Acabei de começar a aprender Angular 4 sem nenhuma experiência anterior com Angular. Tenho procurado algo assim, mas todos os exemplos estão em AngularJs, que difere muito do Angular 4

Você poderia fazer assim:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

e então em seu componente:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Editar: vejo comentários informando que isso não funciona mais devido ao elemento ser indefinido. Eu criei um exemplo StackBlitz em Angular 7 e ainda funciona. Alguém pode dar um exemplo em que não funciona?

Na verdade, existe uma maneira pura de javascript de fazer isso sem usar setTimeoutourequestAnimationFrame ou jQuery.

Resumindo, encontre o elemento em scrollView para o qual deseja rolar e use scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

Aqui está um plunkr .

Aqui está como fiz isso usando o Angular 4.

Modelo

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

adicione esta função ao componente.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

No Angular 7 funciona perfeito

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

Em componente

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

Jon tem a resposta certa e isso funciona em meus projetos angulares 5 e 6.

Se eu quiser clicar para rolar suavemente da barra de navegação para o rodapé:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

Como eu queria rolar de volta para o cabeçalho do rodapé, criei um serviço no qual essa função está localizada e o injetei nos componentes da barra de navegação e do rodapé e passei 'cabeçalho' ou 'rodapé' quando necessário. apenas lembre-se de dar às declarações de componente os nomes de classe usados:

<app-footer class="footer"></app-footer>

Outra maneira de fazer isso no Angular:

Markup:

<textarea #inputMessage></textarea>

Adicionar ViewChild()propriedade:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Role para qualquer lugar que quiser dentro do componente usando a scrollIntoView()função:

this.inputMessageRef.nativeElement.scrollIntoView();

Você pode rolar para qualquer elemento ref em sua visão usando o bloco de código abaixo. Observe que o destino (id do elementref ) pode estar em qualquer tag html válida.

Na visualização (arquivo html)

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

no .tsarquivo,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Você pode conseguir isso usando a referência a um elemento DOM angular da seguinte maneira:

Aqui está o exemplo em stackblitz

o modelo de componente:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

No Angular, você pode usar ViewChilde ElementRef: dar ao seu elemento HTML uma referência

<div #myDiv > 

e dentro do seu componente:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

você pode usar this.myDivRef.nativeElementpara chegar ao seu elemento

Eu fiz algo parecido com o que você está pedindo apenas usando jQuery para encontrar o elemento (como document.getElementById(...)) e usando a .focus()chamada.

Você pode fazer isso usando jquery:

código ts:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

Código HTML :

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

Aplique isso nos elementos que você deseja rolar:

<div id="elementTo">some content</div>

Aqui está uma amostra stackblitz.