Angular 5 - Dynamically passing data from Button to Component

Question

This is my first Angular project and I am faced with one problem here.

On home screen, I have 2 buttons sharing the same component:

<div class="container">
  <div class="panel panel-primary">
      <div class="panel-heading">
          <h4 class="panel-title">
            Mandate
          </h4>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-8">
              <a routerLink="/configuration"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>
          </div>
        </div>
      </div>
    </div>
  <div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">
          Funds
        </h4>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-8">
            <a routerLink="/configuration"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>
        </div>
      </div>
    </div>
  </div>
</div>

By clicking the 2 Configuration buttons, user will see the exactly same screen. The only difference is the data that will be presented.

I can think of 2 options here:

1. Create separate components for each button
2. Share same component, but use some flag to tell which button that was clicked.

Option 2 seems much cleaner, but I do not know how to achieve this.

This is how my router is configured:

export const routes: Routes = [
  { path: 'configuration', component: ConfigurationComponent,  canActivate: [AuthenticationGuard], data : { title: 'Configuration' } },
  // Other paths...
];

This is my actual component:

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

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

  constructor() { }

  ngOnInit() {
  }

}

This question may seem naive but would appreciate if anyone could advise. Thanks!

Answer 1

Put

<a [routerLink]="['/configuration','btn1']"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>

and

<a [routerLink]="['/configuration','btn2']"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>

inside route:

{ path: 'configuration/:btn', component: ConfigurationComponent,  canActivate: [AuthenticationGuard], data : { title: 'Configuration' } },

component.ts

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.btnType = +params['btn']; 
  }