My first Angular 5 application contains several components which each have one group of properties for use in their templates and another group using @Input() and @Output() for communication with other components. I'd like to know whether there is a style guide, convention or at least some good practices for distinguishing these properties.
I want to distinguish them from the point of view of outside users of my component for a few reasons:
Binding properties are much more likely to change when developing the component
Binding properties often depend on a sequence of steps which is unbecoming of a nice API (ie update the form fields individually, then click a save button which takes no arguments). The API alternative would be a single save method. Searching is similar.
Some properties and operations only make sense in the particular context of your view, and are a useless and confusing noise to others using your component.
My initial thinking was that the binding properties should be private and the Inputs and Outputs public, to indicate that only the latter may be used by outside components. However, I've discovered that using private variables for bindings is not possible using AOT compilation and seems to be generally discouraged, it also means all unit tests have to go through the DOM which makes them far more complicated.
I also considered using underscore prefix _name for template-facing properties but this seems to be generally discouraged in TypeScript and Angular when I searched around for it, although not with any reference to this context. Admittedly it could lead to a situation in which you have private (totally internal), underscored (template-facing) and public (outside-facing) variables in the same component, though I'm not convinced that would actually be a bad thing.
