docs(common): migrate `@howToUse` tags (#23062)

In pipes the content of these tags is now generated automatically.
In directives these tags have been converted to `@usageNotes` tags,
but in the future me might find a way to generate that usage too.

PR Close #23062

packages/common/src/directives/ng_class.ts

@@ -13,7 +13,7 @@ import {Directive, DoCheck, ElementRef, Input, IterableChanges, IterableDiffer,
  *
  * @whatItDoes Adds and removes CSS classes on an HTML element.
  *
- * @howToUse
+ * @usageNotes
  * ```
  *     <some-element [ngClass]="'first second'">...</some-element>
  *

packages/common/src/directives/ng_plural.ts

@@ -18,7 +18,7 @@ import {SwitchView} from './ng_switch';
  *
  * @whatItDoes Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.
  *
- * @howToUse
+ * @usageNotes
  * ```
  * <some-element [ngPlural]="value">
  *   <ng-template ngPluralCase="=0">there is nothing</ng-template>
@@ -86,7 +86,7 @@ export class NgPlural {
  * @whatItDoes Creates a view that will be added/removed from the parent {@link NgPlural} when the
  *             given expression matches the plural expression according to CLDR rules.
  *
- * @howToUse
+ * @usageNotes
  * ```
  * <some-element [ngPlural]="value">
  *   <ng-template ngPluralCase="=0">...</ng-template>

packages/common/src/directives/ng_style.ts

@@ -13,7 +13,7 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer,
  *
  * @whatItDoes Update an HTML element styles.
  *
- * @howToUse
+ * @usageNotes
  * ```
  * <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
  *

packages/common/src/directives/ng_switch.ts

@@ -39,7 +39,7 @@ export class SwitchView {
  * @whatItDoes Adds / removes DOM sub-trees when the nest match expressions matches the switch
  *             expression.
  *
- * @howToUse
+ * @usageNotes
  * ```
  *     <container-element [ngSwitch]="switch_expression">
  *       <some-element *ngSwitchCase="match_expression_1">...</some-element>
@@ -133,7 +133,7 @@ export class NgSwitch {
  *             given expression evaluate to respectively the same/different value as the switch
  *             expression.
  *
- * @howToUse
+ * @usageNotes
  * ```
  * <container-element [ngSwitch]="switch_expression">
  *   <some-element *ngSwitchCase="match_expression_1">...</some-element>
@@ -173,7 +173,7 @@ export class NgSwitchCase implements DoCheck {
  * match the
  *             switch expression.
  *
- * @howToUse
+ * @usageNotes
  * ```
  * <container-element [ngSwitch]="switch_expression">
  *   <some-element *ngSwitchCase="match_expression_1">...</some-element>

packages/common/src/directives/ng_template_outlet.ts

@@ -13,7 +13,7 @@ import {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChange
  *
  * @whatItDoes Inserts an embedded view from a prepared `TemplateRef`
  *
- * @howToUse
+ * @usageNotes
  * ```
  * <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>
  * ```

packages/common/src/pipes/async_pipe.ts

@@ -43,7 +43,6 @@ const _observableStrategy = new ObservableStrategy();
 /**
  * @ngModule CommonModule
  * @whatItDoes Unwraps a value from an asynchronous primitive.
- * @howToUse `observable_or_promise_expression | async`
  * @description
  * The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has
  * emitted. When a new value is emitted, the `async` pipe marks the component to be checked for

packages/common/src/pipes/date_pipe.ts

@@ -14,7 +14,6 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 /**
  * @ngModule CommonModule
  * @whatItDoes Uses the function {@link formatDate} to format a date according to locale rules.
- * @howToUse `date_expression | date[:format[:timezone[:locale]]]`
  * @description
  *
  * Where:

packages/common/src/pipes/deprecated/date_pipe.ts

@@ -14,7 +14,6 @@ import {DateFormatter} from './intl';
 /**
  * @ngModule CommonModule
  * @whatItDoes Formats a date according to locale rules.
- * @howToUse `date_expression | date[:format]`
  * @description
  *
  * Where:

packages/common/src/pipes/deprecated/number_pipe.ts

@@ -62,7 +62,6 @@ function formatNumber(
 /**
  * @ngModule CommonModule
  * @whatItDoes Formats a number according to locale rules.
- * @howToUse `number_expression | number[:digitInfo]`
  *
  * Formats a number as text. Group sizing and separator and other locale-specific
  * configurations are based on the active locale.
@@ -99,7 +98,6 @@ export class DeprecatedDecimalPipe implements PipeTransform {
 /**
  * @ngModule CommonModule
  * @whatItDoes Formats a number as a percentage according to locale rules.
- * @howToUse `number_expression | percent[:digitInfo]`
  *
  * @description
  *
@@ -129,7 +127,6 @@ export class DeprecatedPercentPipe implements PipeTransform {
 /**
  * @ngModule CommonModule
  * @whatItDoes Formats a number as currency using locale rules.
- * @howToUse `number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]`
  * @description
  *
  * Use `currency` to format a number as currency.

packages/common/src/pipes/i18n_plural_pipe.ts

@@ -15,7 +15,6 @@ const _INTERPOLATION_REGEXP: RegExp = /#/g;
 /**
  * @ngModule CommonModule
  * @whatItDoes Maps a value to a string that pluralizes the value according to locale rules.
- * @howToUse `expression | i18nPlural:mapping[:locale]`
  * @description
  *
  *  Where:

packages/common/src/pipes/i18n_select_pipe.ts

@@ -12,7 +12,6 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 /**
  * @ngModule CommonModule
  * @whatItDoes Generic selector that displays the string that matches the current value.
- * @howToUse `expression | i18nSelect:mapping`
  * @description
  *
  *  Where `mapping` is an object that indicates the text that should be displayed

packages/common/src/pipes/json_pipe.ts

@@ -11,7 +11,6 @@ import {Pipe, PipeTransform} from '@angular/core';
 /**
  * @ngModule CommonModule
  * @whatItDoes Converts value into JSON string.
- * @howToUse `expression | json`
  * @description
  *
  * Converts value into string using `JSON.stringify`. Useful for debugging.

packages/common/src/pipes/number_pipe.ts

@@ -14,7 +14,6 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 /**
  * @ngModule CommonModule
  * @whatItDoes Uses the function {@link formatNumber} to format a number according to locale rules.
- * @howToUse `number_expression | number[:digitInfo[:locale]]`
  * @description
  *
  * Formats a number as text. Group sizing and separator and other locale-specific
@@ -58,7 +57,6 @@ export class DecimalPipe implements PipeTransform {
  * @ngModule CommonModule
  * @whatItDoes Uses the function {@link formatPercent} to format a number as a percentage according
  * to locale rules.
- * @howToUse `number_expression | percent[:digitInfo[:locale]]`
  * @description
  *
  * Formats a number as percentage.
@@ -97,7 +95,6 @@ export class PercentPipe implements PipeTransform {
  * @ngModule CommonModule
  * @whatItDoes Uses the functions {@link getCurrencySymbol} and {@link formatCurrency} to format a
  * number as currency using locale rules.
- * @howToUse `number_expression | currency[:currencyCode[:display[:digitInfo[:locale]]]]`
  * @description
  *
  * Use `currency` to format a number as currency.

packages/common/src/pipes/slice_pipe.ts

@@ -12,7 +12,6 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 /**
  * @ngModule CommonModule
  * @whatItDoes Creates a new List or String containing a subset (slice) of the elements.
- * @howToUse `array_or_string_expression | slice:start[:end]`
  * @description
  *
  * Where the input expression is a `List` or `String`, and: