I am using component(X) as selector into another component(Y , here using x as <app-x></app-x>), How can I pass varriable to x from Y?

I want to make a directive(component)for data-table using mat-table so that I can reuse it wherever I need to create data-table. So I want to define its header column according to component wherever I will resuse this data-table directive?

component X
data-table.component.html

<ng-container  *ngFor=  "let elm of   displayedColumns" matColumnDef = "{{elm}}"> 

data-table.component.ts

 @Component({
   selector: 'app-data-tables',
   templateUrl: './data-tables.component.html',
   styleUrls: ['./data-tables.component.css']
 })
 export class DataTablesComponent implements OnInit {
   displayedColumns=
 ["Positions","Full Name","Username","Device","IPAddress","Mobile","Email","LoginDate"];
   dataSourceTable: MatTableDataSource<any> = new MatTableDataSource<any>();
   constructor() { }
 
   ngOnInit(): void {
   }
 
 }

component Y
y.component.html

<app-data-table></app-data-table>