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;

Amir Christian · Accepted Answer · 2019-10-01 22:37:34Z

2

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>

answered Oct 1, 2019 at 22:37

Amir Christian

5956 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Leo Davtyan Over a year ago

is there an easier way to do this in case I would like to fix its CSS in componentA?

Amir Christian Over a year ago

You can use ngStyle

Amir Christian Over a year ago

<div [ngStyle]="{'background-color':'green'}"></<div> this is example

Leo Davtyan Over a year ago

it didn't work...it still taking the componentA background color

Amir Christian Over a year ago

No, you should receive backgroundColor from component A like buttonName

|

Amir Christian · Accepted Answer · 2019-10-01 23:29:32Z

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';

answered Oct 1, 2019 at 23:29

Amir Christian

5956 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related