How can I apply pipes and get action buttons(Completely reusable) in Mat-table reusable component

Question

I want to create a reusable component of the Angular Material Mat-table.

I guess I've done pretty much about it (You can see in stackblitz) - I'm able to load the data from the parent component to the child component but I want to apply pipes on it before displaying it on the mat-table because I read it somewhere(Image below) that I've to apply pipes before passing the data to the reusable component(table-wrapper-component). That means the pipes thing should've been done in the parent component's ts file before passing that data(arrayOfObjects) to the child component. I'm not getting any clue to do that, help me with that.

Source to the Pipe thing

Second thing, I want to use action buttons (properly reusable) in Mat-table. I've done that thing but I don't think what I've done is reusable. Please look into that and help me with that too, to make that reusable.

I know I didn't state the problem properly but I really need help with this. Please look into the stackblitz of this problem.

Stackblitz of this problem

Thanks in Advance

Answer 1

If you need use pipes before you data loaded you can create standard pipe Angular application, then inject pipe to parent component as service in to constructor and register it pipe locally in parent component.

After you push the button on your table, you can send data about filter to your father component, in father component catch event and use filter from you pipe.

And if you want to update the data in table, you need to add a getter and setter for you @input datasource.

for example:

// your pipe

@Pipe(...)
export MyPipe {

transform(data: any) {

    .... your code

    return dataTransform
}

}


// Your father component

@component(
selector: 'my-father',
template: `

<my-table-component
[dataSourse]='dataSourse'
(myEventFilter)=myFilter($event)

></my-table-component>


`
providers: [MyPipe]

)

export MyFatherComponent {

  dataSourse: amy;


  constructor(ptivate myPipe: MyPype)
  
  
  myFilter(eventData){
  
   this.dataSourse = myPipe.transform(eventData)
  
  }
 

}

About getter and setter you can read in documentation https://angular.io/guide/component-interaction