[Feature] Playgrounds improvements

[skoropadas]

Description

I think it would be useful to add the following enhancements to playgrounds:

• Directive support
• Pipe support
• Ability to input custom values for template variables

Proposed solution

What is meant by inputting custom values:
This is a kind of list of controls that can be manually created for use with a pipe. For example, a configuration may look as follows:

import {NgDocPage} from '@ng-doc/core';

const MyAwesomePage: NgDocPage = {
  playgrounds: {
    PipePlayground: {
      target: DatePipe,
      template: `{{ values.isoDate | datePipe }}`,
      values: {
        isoDate: 'string',
      }
    },
  },
};

export default MyAwesomePage;

NgDoc will create a control for the "isoDate" field based on the provided type. This will allow the user to input a value and see how it is processed by the pipe. Additionally, if the pipe has additional settings, NgDoc will display a list of them in the Settings section, similar to how it does for components.

For components and directives, this may not be as important since the values of their inputs change through controls in the Settings section, but this values can be used in the template (not for the inputs)

Alternatives considered

[skoropadas]

I decided not to implement custom input controls, because the feature may be controversial and poorly used, but it can be added on a separate request if anyone needs it.

[skoropadas]

🎉 This issue has been resolved in version 16.4.0 🎉

The release is available on:

• v16.4.0
• GitHub release

Your semantic-release bot 📦🚀