docs: escape html tags and close unclosed backticks (#9583)

Author: julianobrasil

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -27,7 +27,7 @@ import {DOCUMENT} from '@angular/common';
  *
  * This class currently uses a relatively simple approach to focus trapping.
  * It assumes that the tab order is the same as DOM order, which is not necessarily true.
- * Things like tabIndex > 0, flex `order`, and shadow roots can cause to two to misalign.
+ * Things like `tabIndex > 0`, flex `order`, and shadow roots can cause to two to misalign.
  */
 export class FocusTrap {
   private _startAnchor: HTMLElement | null;

src/cdk/a11y/interactivity-checker/interactivity-checker.ts

@@ -172,7 +172,7 @@ function isNativeFormElement(element: Node) {
       nodeName === 'textarea';
 }
 
-/** Gets whether an element is an <input type="hidden">. */
+/** Gets whether an element is an `<input type="hidden">`. */
 function isHiddenInput(element: HTMLElement): boolean {
   return isInputElement(element) && element.type == 'hidden';
 }

src/cdk/platform/features.ts

@@ -30,7 +30,7 @@ export function supportsPassiveEventListeners(): boolean {
 /** Cached result Set of input types support by the current browser. */
 let supportedInputTypes: Set<string>;
 
-/** Types of <input> that *might* be supported. */
+/** Types of `<input>` that *might* be supported. */
 const candidateInputTypes = [
   // `color` must come first. Chrome 56 shows a warning if we change the type to `color` after
   // first changing it to something else:

src/cdk/portal/portal-directives.ts

@@ -48,7 +48,7 @@ export type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any
  * directly attached to it, enabling declarative use.
  *
  * Usage:
- * <ng-template [cdkPortalOutlet]="greeting"></ng-template>
+ * `<ng-template [cdkPortalOutlet]="greeting"></ng-template>`
  */
 @Directive({
   selector: '[cdkPortalOutlet], [cdkPortalHost], [portalHost]',

src/lib/autocomplete/autocomplete-trigger.ts

@@ -133,10 +133,10 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   /** Stream of keyboard events that can close the panel. */
   private readonly _closeKeyEventStream = new Subject<void>();
 
-  /** View -> model callback called when value changes */
+  /** `View -> model callback called when value changes` */
   _onChange: (value: any) => void = () => {};
 
-  /** View -> model callback called when autocomplete has been touched */
+  /** `View -> model callback called when autocomplete has been touched` */
   _onTouched = () => {};
 
   /** The autocomplete panel to be attached to this trigger. */

src/lib/card/card.ts

@@ -180,7 +180,7 @@ export class MatCardHeader {}
 
 
 /**
- * Component intended to be used within the <mat-card> component. It adds styles for a preset
+ * Component intended to be used within the `<mat-card>` component. It adds styles for a preset
  * layout that groups an image with a title section.
  * @docs-private
  */

src/lib/checkbox/checkbox.ts

@@ -175,7 +175,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   /** The value attribute of the native input element */
   @Input() value: string;
 
-  /** The native `<input type="checkbox"> element */
+  /** The native `<input type="checkbox">` element */
   @ViewChild('input') _inputElement: ElementRef;
 
   /** Reference to the ripple instance of the checkbox. */

src/lib/chips/chip-input.ts

@@ -23,7 +23,7 @@ export interface MatChipInputEvent {
 
 /**
  * Directive that adds chip-specific behaviors to an input element inside <mat-form-field>.
- * May be placed inside or outside of an <mat-chip-list>.
+ * May be placed inside or outside of an `<mat-chip-list>`.
  */
 @Directive({
   selector: 'input[matChipInputFor]',

src/lib/chips/chip.ts

@@ -106,7 +106,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
       selected: value
     });
   }
-  /** The value of the chip. Defaults to the content inside <mat-chip> tags. */
+  /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */
   @Input()
   get value(): any {
     return this._value != undefined
@@ -292,9 +292,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
  *
  * Example:
  *
- *     <mat-chip>
+ *     `<mat-chip>
  *       <mat-icon matChipRemove>cancel</mat-icon>
- *     </mat-chip>
+ *     </mat-chip>`
  *
  * You *may* use a custom icon, but you may need to override the `mat-chip-remove` positioning
  * styles to properly center the icon within the chip.

src/lib/core/common-behaviors/error-state.ts

@@ -39,7 +39,7 @@ export function mixinErrorState<T extends Constructor<HasErrorState>>(base: T)
 
     /**
      * Stream that emits whenever the state of the input changes such that the wrapping
-     * `MatFormField needs to run change detection.
+     * `MatFormField` needs to run change detection.
      */
     readonly stateChanges = new Subject<void>();
 

src/lib/core/option/option.ts

@@ -205,8 +205,8 @@ export class MatOption implements AfterViewChecked {
   }
 
   /**
-   * Selects the option while indicating the selection came from the user. Used to
-   * determine if the select's view -> model callback should be invoked.
+   * `Selects the option while indicating the selection came from the user. Used to
+   * determine if the select's view -> model callback should be invoked.`
    */
   _selectViaInteraction(): void {
     if (!this.disabled) {

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

@@ -18,9 +18,9 @@ export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
  * `mat-primary .mat-pseudo-checkbox`.
  *
  * Note that this component will be completely invisible to screen-reader users. This is *not*
- * interchangeable with <mat-checkbox> and should *not* be used if the user would directly interact
- * with the checkbox. The pseudo-checkbox should only be used as an implementation detail of
- * more complex components that appropriately handle selected / checked state.
+ * interchangeable with `<mat-checkbox>` and should *not* be used if the user would directly
+ * interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
+ * of more complex components that appropriately handle selected / checked state.
  * @docs-private
  */
 @Component({

src/lib/expansion/expansion-panel-header.ts

@@ -27,9 +27,9 @@ import {matExpansionAnimations} from './expansion-animations';
 
 
 /**
- * <mat-expansion-panel-header>
+ * `<mat-expansion-panel-header>`
  *
- * This component corresponds to the header element of an <mat-expansion-panel>.
+ * This component corresponds to the header element of an `<mat-expansion-panel>`.
  */
 @Component({
   moduleId: module.id,
@@ -136,7 +136,7 @@ export class MatExpansionPanelHeader implements OnDestroy {
 }
 
 /**
- * <mat-panel-description>
+ * `<mat-panel-description>`
  *
  * This direction is to be used inside of the MatExpansionPanelHeader component.
  */
@@ -149,7 +149,7 @@ export class MatExpansionPanelHeader implements OnDestroy {
 export class MatExpansionPanelDescription {}
 
 /**
- * <mat-panel-title>
+ * `<mat-panel-title>`
  *
  * This direction is to be used inside of the MatExpansionPanelHeader component.
  */

src/lib/expansion/expansion-panel.ts

@@ -41,7 +41,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
 let uniqueId = 0;
 
 /**
- * <mat-expansion-panel>
+ * `<mat-expansion-panel>`
  *
  * This component can be used as a single element to show expandable content, or as one of
  * multiple children of an element with the MdAccordion directive attached.

src/lib/grid-list/tile-styler.ts

@@ -152,7 +152,7 @@ export abstract class TileStyler {
 
 /**
  * This type of styler is instantiated when the user passes in a fixed row height.
- * Example <mat-grid-list cols="3" rowHeight="100px">
+ * Example `<mat-grid-list cols="3" rowHeight="100px">`
  * @docs-private
  */
 export class FixedTileStyler extends TileStyler {
@@ -188,7 +188,7 @@ export class FixedTileStyler extends TileStyler {
 
 /**
  * This type of styler is instantiated when the user passes in a width:height ratio
- * for the row height.  Example <mat-grid-list cols="3" rowHeight="3:1">
+ * for the row height.  Example `<mat-grid-list cols="3" rowHeight="3:1">`
  * @docs-private
  */
 export class RatioTileStyler extends TileStyler {
@@ -243,7 +243,7 @@ export class RatioTileStyler extends TileStyler {
 /**
  * This type of styler is instantiated when the user selects a "fit" row height mode.
  * In other words, the row height will reflect the total height of the container divided
- * by the number of rows.  Example <mat-grid-list cols="3" rowHeight="fit">
+ * by the number of rows.  Example `<mat-grid-list cols="3" rowHeight="fit">`
  *
  * @docs-private
  */

src/lib/icon/icon-registry.ts

@@ -70,7 +70,7 @@ class SvgIconConfig {
 }
 
 /**
- * Service to register and display icons used by the <mat-icon> component.
+ * Service to register and display icons used by the `<mat-icon>` component.
  * - Registers icon URLs by namespace and name.
  * - Registers icon set URLs by namespace.
  * - Registers aliases for CSS classes, for use with icon fonts.
@@ -101,7 +101,7 @@ export class MatIconRegistry {
   private _fontCssClassesByAlias = new Map<string, string>();
 
   /**
-   * The CSS class to apply when an <mat-icon> component has no icon name, url, or font specified.
+   * The CSS class to apply when an `<mat-icon>` component has no icon name, url, or font specified.
    * The default 'material-icons' value assumes that the material icon font has been loaded as
    * described at http://google.github.io/material-design-icons/#icon-font-for-the-web
    */
@@ -164,7 +164,7 @@ export class MatIconRegistry {
   /**
    * Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon
    * component with the alias as the fontSet input will cause the class name to be applied
-   * to the <mat-icon> element.
+   * to the `<mat-icon>` element.
    *
    * @param alias Alias for the font.
    * @param className Class name override to be used instead of the alias.
@@ -183,7 +183,7 @@ export class MatIconRegistry {
   }
 
   /**
-   * Sets the CSS class name to be used for icon fonts when an <mat-icon> component does not
+   * Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
    * have a fontSet input value, and is not loading an icon by name or URL.
    *
    * @param className
@@ -194,7 +194,7 @@ export class MatIconRegistry {
   }
 
   /**
-   * Returns the CSS class name to be used for icon fonts when an <mat-icon> component does not
+   * Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not
    * have a fontSet input value, and is not loading an icon by name or URL.
    */
   getDefaultFontSetClass(): string {
@@ -274,7 +274,7 @@ export class MatIconRegistry {
   /**
    * Attempts to find an icon with the specified name in any of the SVG icon sets.
    * First searches the available cached icons for a nested element with a matching name, and
-   * if found copies the element to a new <svg> element. If not found, fetches all icon sets
+   * if found copies the element to a new `<svg>` element. If not found, fetches all icon sets
    * that have not been cached, and searches again after all fetches are completed.
    * The returned Observable produces the SVG element if possible, and throws
    * an error if no icon with the specified name can be found.

src/lib/icon/icon.spec.ts

@@ -14,7 +14,7 @@ function sortedClassNames(element: Element): string[] {
 }
 
 /**
- * Verifies that an element contains a single <svg> child element, and returns that child.
+ * Verifies that an element contains a single `<svg>` child element, and returns that child.
  */
 function verifyAndGetSingleSvgChild(element: SVGElement): SVGElement {
   expect(element.id).toBeFalsy();
@@ -25,7 +25,7 @@ function verifyAndGetSingleSvgChild(element: SVGElement): SVGElement {
 }
 
 /**
- * Verifies that an element contains a single <path> child element whose "id" attribute has
+ * Verifies that an element contains a single `<path>` child element whose "id" attribute has
  * the specified value.
  */
 function verifyPathChildElement(element: Element, attributeValue: string): void {

src/lib/icon/icon.ts

@@ -38,24 +38,24 @@ export const _MatIconMixinBase = mixinColor(MatIconBase);
  *   MatIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format
  *   "[namespace]:[name]", if not the value will be the name of an icon in the default namespace.
  *   Examples:
- *     <mat-icon svgIcon="left-arrow"></mat-icon>
- *     <mat-icon svgIcon="animals:cat"></mat-icon>
+ *     `<mat-icon svgIcon="left-arrow"></mat-icon>
+ *     <mat-icon svgIcon="animals:cat"></mat-icon>`
  *
  * - Use a font ligature as an icon by putting the ligature text in the content of the <mat-icon>
  *   component. By default the Material icons font is used as described at
  *   http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an
  *   alternate font by setting the fontSet input to either the CSS class to apply to use the
  *   desired font, or to an alias previously registered with MatIconRegistry.registerFontClassAlias.
  *   Examples:
- *     <mat-icon>home</mat-icon>
- *     <mat-icon fontSet="myfont">sun</mat-icon>
+ *     `<mat-icon>home</mat-icon>
+ *     <mat-icon fontSet="myfont">sun</mat-icon>`
  *
  * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the
  *   font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a
  *   CSS class which causes the glyph to be displayed via a :before selector, as in
  *   https://fortawesome.github.io/Font-Awesome/examples/
  *   Example:
- *     <mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>
+ *     `<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>`
  */
 @Component({
   moduleId: module.id,
@@ -117,10 +117,10 @@ export class MatIcon extends _MatIconMixinBase implements OnChanges, OnInit, Can
    * the icon name. If the argument is falsy, returns an array of two empty strings.
    * Throws an error if the name contains two or more ':' separators.
    * Examples:
-   *   'social:cake' -> ['social', 'cake']
+   *   `'social:cake' -> ['social', 'cake']
    *   'penguin' -> ['', 'penguin']
    *   null -> ['', '']
-   *   'a:b:c' -> (throws Error)
+   *   'a:b:c' -> (throws Error)`
    */
   private _splitIconName(iconName: string): [string, string] {
     if (!iconName) {

src/lib/progress-bar/progress-bar.ts

@@ -28,7 +28,7 @@ export const _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary'
 
 
 /**
- * <mat-progress-bar> component.
+ * `<mat-progress-bar>` component.
  */
 @Component({
   moduleId: module.id,

src/lib/progress-spinner/progress-spinner.ts

@@ -69,7 +69,7 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
 `;
 
 /**
- * <mat-progress-spinner> component.
+ * `<mat-progress-spinner>` component.
  */
 @Component({
   moduleId: module.id,
@@ -236,10 +236,10 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
 
 
 /**
- * <mat-spinner> component.
+ * `<mat-spinner>` component.
  *
  * This is a component definition to be used as a convenience reference to create an
- * indeterminate <mat-progress-spinner> instance.
+ * indeterminate `<mat-progress-spinner>` instance.
  */
 @Component({
   moduleId: module.id,

src/lib/select/select.ts

@@ -260,10 +260,10 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** Manages keyboard events for options in the panel. */
   _keyManager: ActiveDescendantKeyManager<MatOption>;
 
-  /** View -> model callback called when value changes */
+  /** `View -> model callback called when value changes` */
   _onChange: (value: any) => void = () => {};
 
-  /** View -> model callback called when select has been touched */
+  /** `View -> model callback called when select has been touched` */
   _onTouched = () => {};
 
   /** The IDs of child options to be passed to the aria-owns attribute. */

src/lib/sidenav/drawer.ts

@@ -415,9 +415,9 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
 
 
 /**
- * <mat-drawer-container> component.
+ * `<mat-drawer-container>` component.
  *
- * This is the parent component to one or two <mat-drawer>s that validates the state internally
+ * This is the parent component to one or two `<mat-drawer>`s that validates the state internally
  * and coordinates the backdrop and content styling.
  */
 @Component({

src/lib/stepper/stepper.ts

@@ -43,7 +43,7 @@ import {matStepperAnimations} from './stepper-animations';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatStep extends CdkStep implements ErrorStateMatcher {
-  /** Content for step label given by <ng-template matStepLabel>. */
+  /** Content for step label given by `<ng-template matStepLabel>`. */
   @ContentChild(MatStepLabel) stepLabel: MatStepLabel;
 
   constructor(@Inject(forwardRef(() => MatStepper)) stepper: MatStepper,

src/lib/tabs/tab.ts

@@ -42,10 +42,10 @@ export const _MatTabMixinBase = mixinDisabled(MatTabBase);
   exportAs: 'matTab',
 })
 export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
-  /** Content for the tab label given by <ng-template mat-tab-label>. */
+  /** Content for the tab label given by `<ng-template mat-tab-label>`. */
   @ContentChild(MatTabLabel) templateLabel: MatTabLabel;
 
-  /** Template inside the MatTab view that contains an <ng-content>. */
+  /** Template inside the MatTab view that contains an `<ng-content>`. */
   @ViewChild(TemplateRef) _content: TemplateRef<any>;
 
   /** The plain text label for the tab, used when there is no template label. */

src/lib/tooltip/tooltip.ts

@@ -364,7 +364,7 @@ export class MatTooltip implements OnDestroy {
 
   /**
    * Returns the origin position and a fallback position based on the user's position preference.
-   * The fallback position is the inverse of the origin (e.g. 'below' -> 'above').
+   * The fallback position is the inverse of the origin (e.g. `'below' -> 'above'`).
    */
   _getOrigin(): {main: OriginConnectionPosition, fallback: OriginConnectionPosition} {
     const isDirectionLtr = !this._dir || this._dir.value == 'ltr';