Let's examine a case of a table / list with some items and a button that has to add an item or delete after showing a confirmation dialog.
So basically we have two components:
ListComponent and AddNewItemComponent
How can the ListComponent tell the AddNewItemComponent to show up, collect some data and return the new item back?
The most effective and simple way in my opinion is to let the AddNewItemComponent receive a triggering observable.
show = false
item = new Item()
@Input() set trigger(value: Observable<void>){
if (value){
value.subscribe(()=>{
this.show = true;
this.item = new Item();
}
}
}
@Output() save = new EventEmitter<Item>()
onSave() {
this.save.emit(this.item);
}
If the AddNewItemComponent is generic, e.g it is an alert message, it is recommended to work with ngrx or a synchronizing service.