I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

Question

I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

I am currently using ng2-smart-table and have implemented a custom filter with the same button in both filters. However, I am unsure of how to determine which button is being clicked.

https://i.stack.imgur.com/b1Uca.png

Below is the component code for the button:

@Component({
  template: `
    <button (click)="onClick()">Select Range</button>
  `,
})
export class RangeFilterComponent extends DefaultFilter implements OnInit {

  inputControl = new FormControl();

  constructor(private dialogService: NbDialogService) {
    super();   
  }

  ngOnInit() {
  }

  onClick=()=>{
    this.dialogService.open(ShowcaseDialogComponent, {
      context: {
        title: 'Select Range',
      },
    });
  }
}

Here are the ng2-smart-table settings where I have rendered the button:

columns: {
      name: {
        title: 'Project Name',
        type: 'string',
      },
      description: {
        title: 'Description',
        type: 'string',
      },
      type: {
        title: 'Project Type',
        type: 'string',
      },
      scheme: {
        title: 'Scheme',
        type: 'string',
      },
      assigned_to: {
        title: 'Engineer',
        type: 'string',
      },
      assigned_contractor: {
        title: 'Contractor',
        type: 'string',
      },
      cost_disbursement: {
        title: 'Cost Disbursement',
        filter:{
          type: 'custom',
          component: RangeFilterComponent
        }
      },
      physical_progress: {
        title: 'Physical Progress',
        filter:{
          type: 'custom',
          component: RangeFilterComponent
        }
      },

angular typescript ng2-smart-table

Answer 1

Answer №1

Instructions on how to add functionality to your button.component.ts:

@Input()title:string

//Update the onClick function like this
onClick=()=>{
   console.log(this.title)
   ...
}

Make changes in the main.html as follows:

<app-button [title]="'one'">One</button>
<app-button [title]="'two'">Two</button>

If you have a fixed "input", it's recommended to use @attribute. For example, if you have in your app.component:

<app-button something="one">One</button>

Note that the "attribute" is not enclosed by [] and is simply a string. You can access the attribute in the constructor of app-button:

constructor(@Attribute('something') public something: string) {}

Check out this example on StackBlitz

This approach is more efficient because Angular does not need to query for an attribute every time.

Answer 2

Instructions on how to add functionality to your button.component.ts:

@Input()title:string

//Update the onClick function like this
onClick=()=>{
   console.log(this.title)
   ...
}

Make changes in the main.html as follows:

<app-button [title]="'one'">One</button>
<app-button [title]="'two'">Two</button>

If you have a fixed "input", it's recommended to use @attribute. For example, if you have in your app.component:

<app-button something="one">One</button>

Note that the "attribute" is not enclosed by [] and is simply a string. You can access the attribute in the constructor of app-button:

constructor(@Attribute('something') public something: string) {}

Check out this example on StackBlitz

This approach is more efficient because Angular does not need to query for an attribute every time.

Answer 3

Answer №2

perhaps you are looking to trigger a function when one of the buttons is clicked:

Within your configuration:

  cost_disbursement: {
    title: 'Cost Disbursement',
    filter:{
      type: 'custom',
      component: RangeFilterComponent,
      onComponentInitFunction: (instance) => {
      instance.click.subscribe(()=> {
        this.triggerActionA();
        });
      },
    },
  },
  physical_progress: {
    title: 'Physical Progress',
    filter:{
      type: 'custom',
      component: RangeFilterComponent,
      onComponentInitFunction: (instance) => {
      instance.click.subscribe(()=> {
        this.triggerActionB();
        });
      },
    }
  },

In your customized rendering component:

@Component({
  template: `
    <button (click)="onClick()">Select Range</button>
  `,
})
export class RangeFilterComponent extends DefaultFilter implements OnInit {

  inputControl = new FormControl();
  @Output() click = new EventEmitter();

  constructor(private dialogService: NbDialogService) {
    super();   
  }

  ngOnInit() {
  }

  onClick()=>{
    this.click.emit();
  }
}

and handle the modal opening in the triggerActionA() and triggerActionB()

Answer 4

perhaps you are looking to trigger a function when one of the buttons is clicked:

Within your configuration:

  cost_disbursement: {
    title: 'Cost Disbursement',
    filter:{
      type: 'custom',
      component: RangeFilterComponent,
      onComponentInitFunction: (instance) => {
      instance.click.subscribe(()=> {
        this.triggerActionA();
        });
      },
    },
  },
  physical_progress: {
    title: 'Physical Progress',
    filter:{
      type: 'custom',
      component: RangeFilterComponent,
      onComponentInitFunction: (instance) => {
      instance.click.subscribe(()=> {
        this.triggerActionB();
        });
      },
    }
  },

In your customized rendering component:

@Component({
  template: `
    <button (click)="onClick()">Select Range</button>
  `,
})
export class RangeFilterComponent extends DefaultFilter implements OnInit {

  inputControl = new FormControl();
  @Output() click = new EventEmitter();

  constructor(private dialogService: NbDialogService) {
    super();   
  }

  ngOnInit() {
  }

  onClick()=>{
    this.click.emit();
  }
}

and handle the modal opening in the triggerActionA() and triggerActionB()

Answer 5

Answer №3

Include an @input() attribute in your childComponent (Button Component) with the choices of 'Physical Progress' or 'Cost Disbursement' for the title, and then send it to onClick(title)

Answer 6

Include an @input() attribute in your childComponent (Button Component) with the choices of 'Physical Progress' or 'Cost Disbursement' for the title, and then send it to onClick(title)

I am facing the dilemma of having an identical button appearing in two separate locations. How can I determine which button has been clicked?

Answer №1

Answer №2

Answer №3

Similar questions

Steps for setting up tsconfig.json for Chrome extension development in order to utilize modules:

Practice with Angular - Testing asynchronous service calls

There are a pair of Ionic2 menus; one is currently visible while the other remains hidden

Leverage properties within the storybook component template

Chrome Not Responding to Angular5 Debugging

What purpose does the array.pop()!(object) syntax serve within Codemirror?

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

Changing HTML tags programmatically in Angular while inheriting a template

When working with Visual Studio and a shared TypeScript library, you may encounter the error message TS6059 stating that the file is not under the 'rootDir'. The 'rootDir' is expected to contain all source files

Is there a disparity in capabilities or drawbacks between ViewChild and Input/Output in Angular?

Change validators dynamically according to conditions

Is the validator in my Angular reactive form malfunctioning?

Finding the row index in an Angular material table

What is preventing me from generating Face3 in my ThreeJS Typescript project

Encountering issues accessing the key value 'templateUrl' in Angular6

React component stuck in endless loop due to Intersection Observer

What is the best way to bring in a file or subfolder from a folder that has been

Creating an Observable from static data in Angular that resembles an HTTP request

Component fails to navigate to the page of another component

Ways to convert an asynchronous operation to synchronous in JavaScript