Reusing a component in another component but changing button name (Angular 4+)?

Question

I have a component (componentA) that is using another component (componentB) in its HTML. ComponentB has a button where the title is something else, but I would like to change the name of the button in ComponentA.

ComponentA uses componentB button to navigate to another page, but ComponentB has button that opens up a form. The navigation works and everything, but I would just like to change the name of the buttons when its on different page.

ComponentA.html

<div>
    <component-b (click)="buttonEdit()"></component-b>
</div>

ComponentA.ts

public buttonEdit(): void {
    this.router.navigate(['/users']);
  }

ComponentB.html

<button (click)="openModal()">Add Users</button>

ComponentB.ts

 @Input() buttonEdit: () => void;

Answer 1

You can try this Component B.tmpl:

<button (click)="openModal()">{{buttonName}}</button>

Component B.ts:

@Input() buttonEdit: () => void;
@Input() buttonName: string = 'Add Users';

Component A.ts:

public buttonEdit(): void {
  this.router.navigate(['/users']);
}
public buttonName(): string {
  ...
  return buttonName;
}

component A.tmpl:

<div>
    <component-b (click)="buttonEdit()" [buttonName]="buttonName()"></component-b>
</div>

Answer 2

Try this

Component A.tmpl:

<div>
    <component-b (click)="buttonEdit()" [buttonName]="buttonName()" [backgroundColor]="backgroundColor()"></component-b>
</div>

Component A.ts:

public backgroundColor(): string {
  ...
  return backgroundColor;
}

Component B.tmpl:

<div [ngStyle]="{'background-color': backgroundColor}"></<div>

Component B.ts:

@Input() backgroundColor: string = 'green';