How to maintain documentation for Angular 2+ components?

Question

Angular

The bottom line is that there are a lot of components, there are a lot of incoming and outgoing (@Input, @Output) parameters, just like large companies develop documentation for their code. The same is probably true for React. After all, there are a lot of components and it makes little sense to understand the work of each, most likely, and if you also don’t write tests for the components, then you can already go to hell. What are you doing?

Answer 1

Give the components the correct names
So that when reading the name of the component, you can understand what this component is. For example: select , datepicker , graph , file-input , editor
If the component is a section on the site, then before the name of the directory in which this component is stored, write, for example, + . Parts of sections are placed inside the directory of the section to which they belong.
It looks like this: there is a page, say, "frequently asked questions" - "+faq", which has independent parts, such as "question / answer" - "question-answer" and "ask a question" - "ask-question" ". The resulting hierarchy is:
-- +faq
---- ask-question
------ ask-question.component.ts
---- question-answer
------ question-answer.component.ts
-- faq.component.ts
If a component is used in many places (shared component), then such components are placed in the /shared directory and grouped by semantic component, for example:
-------- select
---- graphs
------ flot-charts
...
After that, looking through all the directories, you can immediately understand where are the sections, where are the components of these sections, and where are the common components. And already, without any description, you can understand what and why.
For general application documentation, you can use Dgeni (instruction)
For TypeScript, you can use typedoc

Answer 2

in order not to waste a lot of time on these fashionable documentation, it is enough to write comments before a piece of code in an understandable native language. no need to write nonsense or some kind of evidence in English. and sometimes you look at the hellish homocode and see such a clear comment

/*
    * Phone mask on inputs
    * */
    $rootScope.mask = function() {
        $(document).ready(function() {
            $('input[type="tel"]').mask('[phone]');
        });
    }();