Estoy usando angular 7 y tengo un componente en el que defino un array y se lo paso a otro componente por su selector
<app-personas-Lista
*ngIf="show == true"
[miArray]="personas-Lista"
></app-personaR>
Cuando pasa determinado evento, ese array cambia sus valores y quiero recargar ese componente hijo para que muestres los nuevos valores, cómo puedo hacerlo?
Agrego detalle del código, acción que modifica el array en el componente padre:
export class ReportComponent implements OnInit {
name: FormControl;
show: boolean;
personas-Lista: Historic[];
constructor(private service: Reportservice) {
this.name = new FormControl('', []);
this.show = true;
this.personas-Lista= [];
}
ngOnInit(): void {}
actionSearch() {
this.show = false;
this.service
.getHistoryByUsername(this.name.value)
.subscribe((history) => {
this.personas-Lista.splice(0,this.personas-Lista.length);
personas-Lista.forEach(h => this.personas-Lista.push(h));
});
this.show = true;
}
Luego en el componente hijo:
@Input() miArray: Historic[];
dataSource: MatTableDataSource<Historic>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
displayedColumns: string[] = [
'ID',
'Asignado a',
];
constructor() {
}
ngOnInit() {
this.dataSource = new MatTableDataSource(this.miArray);
}
ngOnChanges(){
this.ngOnInit();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}