Pass the text to be displayed on button as a paramter-CodePudding

I written a html code which calls, an uploader component. <app-uploader [Details]="Details" (onSubmit)="onSubmitEvent($event)"> </app-uploader> Now the app-uploader component has a line something like:

<button mat-button
          [disabled]="(canSubmit$ | async) === false"
          color="primary"
          i18n="button text, submit file for uploading"
          (click)="submitUpload()">
    Submit
 </button>

However, I don't want the text Submit to appear for my particular use-case.The app-uploader component is a global component and hence I could not change the text directly there. Is there any way to pass any argument when I call the component from my html file such that the word Submit gets overridden while deploying my project?

CodePudding user response：

Based on your comment and the post, to me it seems that this button should be showing a different text depending on the use case.

I suggest to define an input field in the UploaderComponent and then display that as the text of the button.

uploader.component.ts:

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.component.html',
  styleUrls: ['./uploader.component.scss']
})
export class UploaderComponent {
  @Input() buttonText: string = 'Submit';  // default value is submit
  // ...

  constructor() {}

  // ...
}

uploader.component.html:

<button mat-button
          [disabled]="(canSubmit$ | async) === false"
          color="primary"
          i18n="button text, submit file for uploading"
          (click)="submitUpload()">
    {{buttonText}}
 </button>

Now you use the component as follows ([buttonText]="Your favorite text"):

<app-uploader [buttonText]="Your favorite text" [Details]="Details" (onSubmit)="onSubmitEvent($event)"> </app-uploader>