Angular4 - Scrolling to anchor

Question

I am trying to do a simple scroll to an anchor element on the same page. Basically, the person clicks on a "Try It" button and it scrolls to an area lower on the page with the id "login". Right now, it is working with a basic id="login" & <a href="#login"></a> but it is jumping to that section. Ideally, I would like it to scroll there. If I am using Angular4, is there some built in way to do this or what is the easiest way? Thanks!

Whole template... (component still empty)

<div id="image-header">
    <div id="intro">
        <h1 class="text-center">Welcome to ThinkPlan</h1>
        <h3 class="text-center">Planning your way</h3>
        <a class="btn btn-outline-primary" href="#login" id="view">Try It</a> <!-- Where the user clicks to scroll -->
    </div>
</div>
<div class="container" id="info">
    <div class="row">
        <div class="col-md-12">
             <div class="space" id="login"></div> <!-- The place to scroll to -->
                <h1 class="text-center">ThinkPlan</h1>
                <form  class="form-horizontal">
                    <fieldset>
                        <legend>Login</legend>
                        <div class="form-group">
                            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                            <div class="col-lg-10">
                                <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
                            </div>
                        </div>
                        <div class="form-group" id="log-btn">
                            <div class="col-lg-10 col-lg-offset-2">
                                <button routerLink="/plan" type="submit" class="btn btn-outline-primary">Login</button>
                            </div>
                        </div>
                        <p class="lead text-center">New here? <a routerLink="signup">Sign up.</a></p>
                    </fieldset>
                </form>
        </div>
    </div>
</div>

Answer 1

For Angular 6+ you can use:

1. In your routing module:

    imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})]
   

2. Then in your component html

    <a (click)="onClick('AnchorId')">Click me!</a>
    <a (click)="onClick('OtherAnchorId')">Click me, too!</a>
    ...
    <div id="AnchorId">...</div>
    ...
    <div id="OtherAnchorId">...</div>
   

3. Then in your component ts

   import { ViewportScroller } from '@angular/common';
   
   @Component({
       selector: 'component-selector',
       templateUrl: './mycomponent.component.html'
   })
   export class MyComponent {
     constructor(private viewportScroller: ViewportScroller) {}
   
     public onClick(elementId: string): void { 
         this.viewportScroller.scrollToAnchor(elementId);
     }
   }