Now, the question that remains is: How do we define the inputs and outputs of a component?
To define an input property on a component, you can use an @Input (https://angular.io/api/core/Input) decorator on a settable property in the controller class (for example, a writable field or a setter method). When a property binding (https://angular.io/guide/template-syntax#property-binding) is defined, the values will be passed to the class instance by Angular.
For outputs, you use the @Output (https://angular.io/api/core/Output) decorator on EventEmitter (https://angular.io/api/core/EventEmitter). Outputs are represented by events, which can be listened to and reacted upon.
By default, the name of the property ...
