How to call a component with a button which is in a ng2-smart-table

I have a ng2-smart-table which have a specific column with a button:

``

```typescript
settings = {
actions: {
position: 'right',
delete: false,
add: false
},
description: {
title: 'Description',
filter: false
},
.
.
.
id: {
title: 'Facility Rules',
type: 'custom',
renderComponent: ButtonRenderComponent,
onComponentInitFunction(instance) {
instance.save.subscribe( () => {
//something to call another component (so execute its
//ngOnInit() )...
});
}
```
I could not add a button directly, so i created another component for the button. Below is my button component:

```typescript
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
template: `click me`,
selector: 'button-render',
providers: []
})
export class ButtonRenderComponent implements OnInit {

@Input() value: string | number;
@Input() rowData: any;

@Output() save: EventEmitter = new EventEmitter();

ngOnInit(): void {
console.log(this.value)
}

onClick() {
this.save.emit();
}
}
```
When the button of one of the rows is clicked the ng2 table should disappear and the other component should be displayed. Or another solution is to display the component called below/after the ng2 smart table in DOM.