Create button component with text set by parameter | Angular

button-round-boarder-blue-shadow.component.html

<button class="button--color-blue">
  <div><span>{{title}}</span></div>
</button>

button-round-boarder-blue-shadow.component.scss

.button--color-blue {
  height: 40px;
  background-image: linear-gradient(to right, #9EDFCB 0%, #73A5B1 100%);
  border-radius: 40px;
  display: block;
  padding: 1px;
  -webkit-box-shadow: 0px 6px 91px -16px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 6px 91px -16px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 6px 91px -16px rgba(0, 0, 0, 0.5);
  margin: 20px 0px 20px 0px;
  width: 160px;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}

.button--color-blue:active span {
  color: white;
  text-transform: none;
  font-weight: 600;
  font-size: 12px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: white;
}

.button--color-blue span {
  text-transform: none;
  -webkit-background-clip: text;
  color: #73A5B1;
}

.button--color-blue div {
  padding: 0px 30px 0px 30px;
  background: #ffffff;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  height: 100%;
  transition: background .5s ease;
  width: calc(100% - 60px);
  align-items: center;
}

.button--color-blue:active div {
  background-image: linear-gradient(to right, #9EDFCB 0%, #73A5B1 100%);
  border-radius: 40px;
  display: flex;
  justify-content: center;
  height: 100%;
  transition: background .5s ease;
  width: calc(100% - 60px);
  align-items: center;
}

.button--color-blue:focus {
    outline:none;
}

.button--color-blue::before,
.button--color-blue::after {
  background-color: #ffffff;
}

button-round-boarder-blue-shadow.component.ts

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

@Component({
  selector: 'app-button-round-boarder-blue-shadow',
  templateUrl: './button-round-boarder-blue-shadow.component.html',
  styleUrls: ['./button-round-boarder-blue-shadow.component.scss']
})
export class ButtonRoundBoarderBlueShadowComponent implements OnInit {

  @Input() title;

  constructor() { }

  ngOnInit() {
  }

}

modal-initial-configuration.component.html

<app-button-round-boarder-blue-shadow (click)="showProgress.moveNextStep()" title="Empezar"></app-button-round-boarder-blue-shadow>