Q:

Remove Output attribute value from Angular component

I have thought experiment that derived from case where I needed to sometimes add and remove function for Output of my Angular component.
This is the example
Parent component will contain only output function for child component <my-component>.
ParentComponent
class ParentComponent{
  myOutputFunction = null;

  setOutputFunction() {
    this.myOutputFunction = () => {
      // do something
    };
  }

  removeOutputFunction() {
    this.myOutputFunction = null;
  }
}

Template for ParentComponent
<my-component (someOutput)="myOutputFunction($event)"><my-component>

Child component MyComponent will have output someOutput inside. This will serve also as a question how to detect when parent decided to do removeOutputFunction() and potentially subscribe to that event and react to it.
MyComponent child component
class MyComponent {
  @Output() someOutput = new EventEmitter();

  ngOnInit(): void {
    // At this point we can see if there are any observers to someOutput
    if(this.someOutput.observers.length > 0) {
      console.log('YEY we have a set output method from ParentComponent to MyComponent`s attribute');
    } else {
      console.log('We have no attribute defined');
    }
  }
}

In ngOnInit() we can check if we have coded (someOutput)="myOutputFunction($event)".
So, the conclusion. 
Is there a way to listen (subscribe) to change of someOutput from parent from () => // do something value to null value.
When i log this.someOutput.observers i get array of Subscribers.
Can I use this.someOutput as EventEmitter in some way to get to where this experiment is pointing to?
Thanks

A:

You can't remove the output attribute dynamically, but I think this solution can help you.
If you want to set values from parent to child you should use @Input in the child component.
@Output is used to notify something from child to parent.
Solution 1
If you want the children to only emit values when the parent has a function, tell the child component when someone is listening.
Let's assume that your emitted values are of type string
Child Component
class MyComponent {
  @Output() someOutput: EventEmitter<string> = new EventEmitter();
  @Input() isParentListening = false;

  ngOnInit(): void {
    if (this.isParentListening) {
      // Parent wants to receive data
      this.someOutput.emit("Yay! Parent is listening");
    } else {
      // Parent is not listening
      console.log("My parent doesn't take care of me :(");
    }
  }
}

Parent Component
<my-component
  [isParentListening]="listenChildComponent"
  (someOutput)="myOutputFunction($event)"
></my-component>

class ParentComponent {
  listenChildComponent = true;

  myOutputFunction = (value: string) => {
    // do something
  };
}

Solution 2
Another solution is keeping the child component clean and unaware of this logic, and the parent decides if it has to do something or not.
Child Component
class MyComponent {
  @Output() someOutput: EventEmitter<string> = new EventEmitter();

  ngOnInit(): void {
    // Output always as if someone were listening
    this.someOutput.emit("Yay! Someone is listening (I hope)");
  }
}

Parent Component
The parent simply doesn't implement any logic when that output event occurs.
<my-component (someOutput)="()=>{}"></my-component>

class ParentComponent {}

