I have the same button rendered in two different place. How to know which button is clicked?

0
votes

I am using ng2-smart-table. I used the custom filter and rendered same button in both the filter. But I am confused how to know which button is clicked.?

enter image description here

This is the component of 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',
      },
    });
  }
}

This is the settings of ng2-smart-table 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
        }
      },
3
angulartypescriptng2-smart-table

3 Answers

1
votes

Deep say you add to your button.component.ts

@Input()title:string

//and change the onClick like
onClick=()=>{
   console.log(this.title)
   ...
}

And change the main.html like

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

Well, when a "input" is fixed, it's recomender use @attribute. That's imagine you has in your app.component

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

See that the "attribute" it's not enclosed by [] and is a simple string. You can "get" the attribute in the constructor of app-button:

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

See simple stackblitz

This is most efficient, because Angular don't ask about an attribute

1
votes

maybe you just want to do something when one of the buttons is clicked:

In your settings:

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

In your custom render 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 manage the open modal in the methodA() and methodB()

0
votes

Add one @input() Attribute to your childComponent(Button Component) i.e title = 'Physical Progress' or title = 'Cost Disbursement' and then pass it to onClick(title)