Anchor Link Angular

Fala ai Enzo, tudo bem? Funciona do mesmo jeito com Angular, você adiciona um link na sua página com algum href apontando para algum id:

<a href="#questions">Questions</a>

E depois adiciona o id em qual elemento quer que a navegação aconteça:

<div id="questions">Naveguei até aqui</div>

Lembrando que isso só vai funcionar caso não esteja utilizando nenhum hash router.

Espero ter ajudado.

Opa Matheus, obrigado!

Pegando seu exemplo. Vamos supor que eu tenha então o código abaixo

<ul>
  <li><a href="#question1"> Question 1 </a></li>
  <li><a href="#question2"> Question 2 </a></li>
  <li><a href="#question3"> Question 3 </a></li>
</ul>

E as divs na mesma página:

<div id="question1">Naveguei até aqui</div>
<div id="question2">Naveguei até aqui</div>
<div id="question3">Naveguei até aqui</div>

Como você faria para colocar o scroll smooth e mudasse a classe de acordo com com o local que fosse clicado. Ou seja, se fosse clicado no Question 2 mudaria esse "li" para a classe "active" do css ?

.active { color: blue} 

A maioria das soluções que eu encontro na net mostra a solução com jQuery..

Fala ai Enzo, tudo bem? Desculpa a demora para responder, estava tirando umas férias e descansando.

Vamos lá:

Como você faria para colocar o scroll smooth e mudasse a classe de acordo com com o local que fosse clicado. Ou seja, se fosse clicado no Question 2 mudaria esse "li" para a classe "active" do css ?

Nesse caso, acho que você poderia tentar de duas maneiras, a primeira seria com CSS utilizando a propriedade: scroll-behavior: com o valorsmooth`:

html {
  scroll-behavior: smooth;
}

Isso vai mudar o comportamento padrão de scroll.

Ou com JavaScript, utilizando o .scrollTo passando a propriedade behavior com o valor smooth:

ELEMENTO_PARA_SER_SCROLADO.scrollTo({
    behavior: 'smooth'
})

Onde o ELEMENTO_PARA_SER_SCROLADO é o elemento do qual o scroll precisa ir.

Espero ter ajudado.

Obrigado pelo retorno Matheus,

A forma do CSS é bem fácil mesmo, mas infelizmente ainda não funciona em todos navegadores ;( . E via JS eu não consigo implementar no Angular.

Pegando meu próprio exemplo acima e tentando colocar da forma como você falou (código abaixo) não funciona. Que que faltou eu colocar?

  ngOnInit() {

    let questionThree:HTMLElement = document.querySelector('#question3')
    questionThree.scrollTo({ 
      behavior: 'smooth'
    });
  };

Nesse caso, tente utilizar o ViewChild e nativeElement para tentar realizar o scroll.

A ideia é que o próprio Angular seja responsável por buscar e injetar a referência do DOM para você:

Da uma olhada nesse artigo na seção DOM Elements: https://alligator.io/angular/viewchild-access-component/#dom-elements

Ele explica como buscar um elemento na página com ViewChild.

Outro detalhe é o quanto de scroll é necessário para chegar no questionThree, talvez não esteja scrollando porque o mesmo já está visível.