How to direct user to a specific part of a page?

Question

I have a page with a sign in form. This form is separated with two tabs. In the footer, I have a link that should direct the user at this page, this form but at the second tab. What have I tried?

I have tried to access #id but I figure out the because the form is mat-tab and ng-template mat-tab-label didn't know this syntax. So the solution has to be some mat tab menu method. I can create a method like that cause they are a lot of examples in the net. But I don't get how will I call this method when I click the link. This is my code at HTML.

   <div class="reg-form-wrapper">
  <div class="form-viewer">
    <mat-tab-group>
      <mat-tab style="height:500px;">
        <ng-template mat-tab-label>
          <div class="loginHead" class="mat-body-2">Customer login</div>
          <div id="customerLogin"> I want to buy an app</div>
        </ng-template>

        <form>
          <app-mutual-login [userRole]='"customer"'>
          </app-mutual-login>
          <div class="signup-linkcustomer">
              Don't have an account?
              <a routerLink="/auth/register">
                Sign up
              </a>
            </div>
          <div class="separator">
            <h2 class="options"><span class="mat-body-1">or</span></h2>
          </div>

          <div class="button-container">
            <button mat-raised-button color="primary" id="linkdin-btn" type="submit">LinkedIn</button>
            <button mat-raised-button color="primary" id="google-btn" routerLink="/auth/login">google</button>
          </div>
        </form>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <div class="loginHead" id="loginPartner" class="mat-body-2">Partner login</div>
          <div id="customerLogin"> I want to sell an app</div>
        </ng-template>
        <form>
        <app-mutual-login [userRole]='"partner"'>
        </app-mutual-login>
        <div class="signup-linkpartner">
            Don't have an account?
            <a routerLink="/auth/registerpartneroptions">
              Sign up
            </a>
          </div>
          <div id="partnerLoginfooter"></div>
      </form>
      </mat-tab>

    </mat-tab-group>
  </div>
</div>

and i have to call with a link at the footer that look like href="/auth/login" , so far it goes to this page at the form. Has anyone any ideas to help me or to give a hint. I would really appreciate that

A similar example is example but I want to change when I click the link.

The part of the footer :

    <div class="col">
  <div class="footer-link-title">Partner Zone
  </div>
  <ul>
    <li><a href="">Register an app</a></li>
    <li><a href="/auth/login">Partner Login</a></li>
  </ul>
</div>

....The on i need to call this second tab is at Partner Login.

Answer 1

Simplify the problem description:

• when doing a customer login, the tab with index 0 needs to be selected by default
• when doing a partner login, the tab with index 1 needs to be selected by default

So the key bit of information that changes is the tab index, which is a simply integer property. You could do this the old fashioned ugly way by specifying a URL parameter (?tab=1) and read out that parameter. Or...

You could define two routes for the same component and then configure in the route the index of the tab to show:

const routes: Routes = [
    {
        path: 'auth/login', // default customer login
        component: LoginComponent,
        data: {
            tab:0
        }
    },
    {
        path: 'auth/login/partner', // login for partners
        component: LoginComponent,
        data: {
            tab:1
        }
    }
];

Then in the login component you can read out the value of tab and activate that tab.

constructor(private route:ActivatedRoute)

ngOnInit() {
    const selectedTab = this.route.snapshot.data.tab;

    // activate tab with this index through material API
    // (or perhaps passing it to the mat-tab-group selectedIndex property in the html template is enough)
}

Then in your footer you can link to /auth/login/partner to show the login page with the partner tab activated by default.

This answer is largely based on this existing question and answer.