[BUG] @example on components doesn't work after update

[wauss417]

Code example:

/**
 * Component to animate a increasing a number from 0 to its value
 * @example
 * <app-animated-count [digit]="5">
 * </app-animated-count>
 */
@Component({
    selector: 'app-animated-count',
    template: '<span #animatedDigit>{{digit}}</span>',
    styleUrls: ['./animated-count.component.css']
})

Operating System, Node.js, npm, compodoc version(s)

windows 10 v:19042.1110
Nodejs: v14.15.5
npm: v 6.14.11
Package:

  "dependencies": {
    "@angular/animations": "^11.1.2",
    "@angular/common": "~11.1.2",
    "@angular/compiler": "~11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/forms": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/router": "~11.1.2",
    "angular": "^1.8.2",
    "angular-sanitize": "^1.8.2",
    "lodash-es": "^4.17.20",
    "rxjs": "~6.5.5",
    "sweetalert2": "^10.9.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "~11.1.4",
    "@angular/compiler-cli": "~11.1.2",
    "@compodoc/compodoc": "^1.1.14",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "csso-cli": "^3.0.0",
    "gzipper": "^4.5.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.3"
  }

Compodoc (local): v1.1.10

Compodoc (local) v1.1.14

[vogloblinsky]

Is this working ?

/**
 * Component to animate a increasing a number from 0 to its value
 * @example
 * ```
 * <app-animated-count [digit]="5">
 * </app-animated-count>
 * ```
 */

[wauss417]

Is this working ?

/**
 * Component to animate a increasing a number from 0 to its value
 * @example
 * ```
 * <app-animated-count [digit]="5">
 * </app-animated-count>
 * ```
 */

yeah, with that change it works.

This is kinda weird because '@example' still working on methods but no on decorated classes.
Besides I found other weird case.

Code example:

/**
 * directive to focus to a element once it is rendered by DOM, component o ng directive.
 * @example
 * <div>
 *     <label for="input_name" class="field-label">
 *          input_name
 *    </label>
 *     <input type="text" name="input_name" appFocusTo>
 * </div>
 */
@Directive({
  selector: '[appFocusTo]'
})

I test it on a method comment.

  /**
   * Change focus to the element once it has been rendered
   * @example
   * <div>
   *     <label for="input_name" class="field-label">
   *          input_name
   *    </label>
   *     <input type="text" name="input_name" appFocusTo>
   * </div>
   */
  ngAfterViewInit() {
  }

I think it tries to render whatever comes after '@example'.

When I add ``` it is fixed

[torsten-bit]

This issue seems to have been introduced with 1.1.12. With version 1.1.11, the @example on component-doc-comments is rendered correctly, when containing html-tags. But the issue occurs when updating to 1.1.12.

However in 1.1.11, opening-tags in method-@example-comments are rendered with escaped brackets, when using custom-elements with input-bindings.

/**
 * @example
 * <grid [gridData]="gridData">
 * </grid>
 */