How to remove the value of dropdown one component to another component in angular

Question

Trying to remove the value of dropdown from table component to ooptymodel component. I have used input and output decorator. But that is not working here. So, How to remove the value of dropdown from table component. I do not know how to use a service to get the solution. So, If anyone know Please help to find the solution.

table component:

export class TableComponent implements OnInit {
@Input() names: any = [];
@Output() deletedName: EventEmitter<string> = new EventEmitter();
constructor() {}

ngOnInit() {}

onRemove(name: string) {
this.names = this.names.filter((x) => x !== name);
this.deletedName.emit(name);
}
}

ooptymodel component:

export class OoptymodelComponent implements OnInit {
dpData: string[] = [
'Maverick',
'Stanislav',
'Arxero',
'Feruchio',
'Mavericus',
'Arxiour',
];
deletedName: string;
constructor() {}

ngOnInit() {}

onDeletedName(name: string) {
this.deletedName = name;
}
}

Demo: https://stackblitz.com/edit/angular-pass-table-data-to-input-property-dhxfq6?file=src%2Fapp%2Fshared%2Ftable%2Ftable.component.html

Answer 1

@Input used to take data from parent @Output used for emit data to parent. but in your code, The order of using the components is wrong.

and callFun() is not working, cause components in angular are encapsulation.

check this link

input output in angular

However, you can use a service and rxjs