diff --git a/packages/animations/browser/src/dsl/animation_timeline_builder.ts b/packages/animations/browser/src/dsl/animation_timeline_builder.ts index 226a19ca30f..2e498499f72 100644 --- a/packages/animations/browser/src/dsl/animation_timeline_builder.ts +++ b/packages/animations/browser/src/dsl/animation_timeline_builder.ts @@ -57,7 +57,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g'); * * The code below will be converted from: * - * ``` + * ```ts * sequence([ * style({ opacity: 0 }), * animate(1000, style({ opacity: 0 })) @@ -65,7 +65,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g'); * ``` * * To: - * ``` + * ```ts * keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }] * duration = 1000 * delay = 0 @@ -104,7 +104,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g'); * Each timeline has a `backFill` property which is responsible for filling in new styles into * already processed keyframes if a new style shows up later within the animation sequence. * - * ``` + * ```ts * sequence([ * style({ width: 0 }), * animate(1000, style({ width: 100 })), diff --git a/packages/animations/src/animation_event.ts b/packages/animations/src/animation_event.ts index 8923f8e406d..39ad65393d8 100644 --- a/packages/animations/src/animation_event.ts +++ b/packages/animations/src/animation_event.ts @@ -10,7 +10,7 @@ * An instance of this class is returned as an event parameter when an animation * callback is captured for an animation either during the start or done phase. * - * ```typescript + * ```ts * @Component({ * host: { * '[@myAnimationTrigger]': 'someExpression', diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts index 7f0faed4e3c..730dc7c32f7 100644 --- a/packages/animations/src/animation_metadata.ts +++ b/packages/animations/src/animation_metadata.ts @@ -488,7 +488,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata { * The provided animation value is expected to be an array consisting of state and * transition declarations. * - * ```typescript + * ```ts * @Component({ * selector: "my-component", * templateUrl: "my-component-tpl.html", @@ -518,7 +518,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata { * The `transition` animation method also supports reading an inline function which can decide * if its associated animation should be run. * - * ```typescript + * ```ts * // this method is run each time the `myAnimationTrigger` trigger value changes. * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key: string]: any}): boolean { @@ -551,7 +551,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata { * * The following example shows how to use this feature: * - * ```typescript + * ```angular-ts * @Component({ * selector: 'my-component', * template: ` @@ -580,7 +580,7 @@ export interface AnimationStaggerMetadata extends AnimationMetadata { * This means that you can disable all animations for an app * by placing a host binding set on `@.disabled` on the topmost Angular component. * - * ```typescript + * ```ts * import {Component, HostBinding} from '@angular/core'; * * @Component({ @@ -654,12 +654,12 @@ export function trigger(name: string, definitions: AnimationMetadata[]): Animati * **Style examples** * * The following example calls `style()` to set a single CSS style. - * ```typescript + * ```ts * animate(500, style({ background: "red" })) * ``` * The following example calls `keyframes()` to set a CSS style * to different values for successive keyframes. - * ```typescript + * ```ts * animate(500, keyframes( * [ * style({ background: "blue" }), @@ -686,7 +686,7 @@ export function animate( * `keyframes()`, or use `animate()` calls with a delay value. * For example: * - * ```typescript + * ```ts * group([ * animate("1s", style({ background: "black" })), * animate("2s", style({ color: "white" })) @@ -724,7 +724,7 @@ export function group( * - Steps defined by `animate()` calls apply the styling data over time * as specified by the timing data. * - * ```typescript + * ```ts * sequence([ * style({ opacity: 0 }), * animate("1s", style({ opacity: 1 })) @@ -777,7 +777,7 @@ export function sequence( * The following examples create animation styles that collect a set of * CSS property values: * - * ```typescript + * ```ts * // string values for CSS properties * style({ background: "red", color: "blue" }) * @@ -788,7 +788,7 @@ export function sequence( * The following example uses auto-styling to allow an element to animate from * a height of 0 up to its full height: * - * ``` + * ```ts * style({ height: 0 }), * animate("1s", style({ height: "*" })) * ``` @@ -859,7 +859,7 @@ export function state( * when each `backgroundColor` value is applied. The color is red at the start, and changes to * blue when 20% of the total time has elapsed. * - * ```typescript + * ```ts * // the provided offset values * animate("5s", keyframes([ * style({ backgroundColor: "red", offset: 0 }), @@ -872,7 +872,7 @@ export function state( * If there are no `offset` values specified in the style entries, the offsets * are calculated automatically. * - * ```typescript + * ```ts * animate("5s", keyframes([ * style({ backgroundColor: "red" }) // offset = 0 * style({ backgroundColor: "blue" }) // offset = 0.33 @@ -915,7 +915,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * expression bound to the trigger's element goes from `fromState` to `toState` * * _Example:_ - * ```typescript + * ```ts * transition('open => closed', animate('.5s ease-out', style({ height: 0 }) )) * ``` * @@ -923,7 +923,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * the expression bound to the trigger's element goes from `fromState` to `toState` or vice versa * * _Example:_ - * ```typescript + * ```ts * transition('enabled <=> disabled', animate('1s cubic-bezier(0.8,0.3,0,1)')) * ``` * @@ -931,7 +931,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * element enters or exists the DOM * * _Example:_ - * ```typescript + * ```ts * transition(':enter', [ * style({ opacity: 0 }), * animate('500ms', style({ opacity: 1 })) @@ -942,7 +942,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * the numerical expression bound to the trigger's element has increased in value or decreased * * _Example:_ - * ```typescript + * ```ts * transition(':increment', query('@counter', animateChild())) * ``` * @@ -950,7 +950,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * should occur whenever one of the state change expressions matches * * _Example:_ - * ```typescript + * ```ts * transition(':increment, * => enabled, :enter', animate('1s ease', keyframes([ * style({ transform: 'scale(1)', offset: 0}), * style({ transform: 'scale(1.1)', offset: 0.7}), @@ -999,7 +999,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * * ``` * - * ```typescript + * ```ts * trigger("myAnimationTrigger", [ * ..., // states * transition("on => off, open => closed", animate(500)), @@ -1019,7 +1019,7 @@ export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSe * * ``` * - * ```typescript + * ```ts * trigger("myAnimationTrigger", [ * ..., // states * transition( @@ -1065,7 +1065,7 @@ export function transition( * The following example defines a reusable animation, providing some default parameter * values. * - * ```typescript + * ```ts * var fadeAnimation = animation([ * style({ opacity: '{{ start }}' }), * animate('{{ time }}', @@ -1168,7 +1168,7 @@ export function useAnimation( * * Tokens can be merged into a combined query selector string. For example: * - * ```typescript + * ```ts * query(':self, .record:enter, .record:leave, @subTrigger', [...]) * ``` * @@ -1226,7 +1226,7 @@ export function useAnimation( * The following example queries for inner elements and animates them * individually using `animate()`. * - * ```typescript + * ```angular-ts * @Component({ * selector: 'inner', * template: ` @@ -1301,7 +1301,7 @@ export function query( * * Here is the component code: * - * ```typescript + * ```ts * import {trigger, transition, style, animate, query, stagger} from '@angular/animations'; * @Component({ * templateUrl: 'list.component.html', @@ -1330,7 +1330,7 @@ export function query( * * Here is the animation trigger code: * - * ```typescript + * ```ts * trigger('listAnimation', [ * transition('* => *', [ // each time the binding value changes * query(':leave', [ diff --git a/packages/common/http/src/client.ts b/packages/common/http/src/client.ts index d46cf7c8401..ec6d38de0bb 100644 --- a/packages/common/http/src/client.ts +++ b/packages/common/http/src/client.ts @@ -71,7 +71,7 @@ function addBody( * * ### HTTP Request Example * - * ``` + * ```ts * // GET heroes whose name contains search term * searchHeroes(term: string): observable{ * @@ -82,20 +82,20 @@ function addBody( * * Alternatively, the parameter string can be used without invoking HttpParams * by directly joining to the URL. - * ``` + * ```ts * this.httpClient.request('GET', this.heroesUrl + '?' + 'name=term', {responseType:'json'}); * ``` * * * ### JSONP Example - * ``` + * ```ts * requestJsonp(url, callback = 'callback') { * return this.httpClient.jsonp(this.heroesURL, callback); * } * ``` * * ### PATCH Example - * ``` + * ```ts * // PATCH one of the heroes' name * patchHero (id: number, heroName: string): Observable<{}> { * const url = `${this.heroesUrl}/${id}`; // PATCH api/heroes/42 diff --git a/packages/common/http/src/context.ts b/packages/common/http/src/context.ts index eaaa54bcfaf..860fc9f025b 100644 --- a/packages/common/http/src/context.ts +++ b/packages/common/http/src/context.ts @@ -25,7 +25,7 @@ export class HttpContextToken { * * ### Usage Example * - * ```typescript + * ```ts * // inside cache.interceptors.ts * export const IS_CACHE_ENABLED = new HttpContextToken(() => false); * diff --git a/packages/common/http/src/interceptor.ts b/packages/common/http/src/interceptor.ts index 65aa3845356..192765d69aa 100644 --- a/packages/common/http/src/interceptor.ts +++ b/packages/common/http/src/interceptor.ts @@ -107,7 +107,7 @@ export type HttpHandlerFn = (req: HttpRequest) => Observable, next: * HttpHandlerFn) => { * return next(modifiedReq); @@ -118,7 +118,7 @@ export type HttpHandlerFn = (req: HttpRequest) => Observable, next: * HttpHandlerFn) => { * const userToken = 'MY_TOKEN'; const modifiedReq = req.clone({ diff --git a/packages/common/http/src/provider.ts b/packages/common/http/src/provider.ts index 44f1f60c693..3390c12d54f 100644 --- a/packages/common/http/src/provider.ts +++ b/packages/common/http/src/provider.ts @@ -89,7 +89,7 @@ function makeHttpFeature( * Server-Side Rendering for better performance and compatibility. To enable `fetch`, add * `withFetch()` feature to the `provideHttpClient()` call at the root of the application: * - * ``` + * ```ts * provideHttpClient(withFetch()); * ``` * diff --git a/packages/common/http/src/transfer_cache.ts b/packages/common/http/src/transfer_cache.ts index 7a5afde732d..09d37e2e85b 100644 --- a/packages/common/http/src/transfer_cache.ts +++ b/packages/common/http/src/transfer_cache.ts @@ -68,7 +68,7 @@ export type HttpTransferCacheOptions = { * * When the same API endpoint is accessed via `http://internal-domain.com:8080` on the server and * via `https://external-domain.com` on the client, you can use the following configuration: - * ```typescript + * ```ts * // in app.server.config.ts * { * provide: HTTP_TRANSFER_CACHE_ORIGIN_MAP, diff --git a/packages/common/src/directives/ng_class.ts b/packages/common/src/directives/ng_class.ts index add62680ccc..ddc81c9c154 100644 --- a/packages/common/src/directives/ng_class.ts +++ b/packages/common/src/directives/ng_class.ts @@ -42,7 +42,7 @@ interface CssClassState { * @ngModule CommonModule * * @usageNotes - * ``` + * ```html * ... * * ... diff --git a/packages/common/src/directives/ng_component_outlet.ts b/packages/common/src/directives/ng_component_outlet.ts index 552036de177..0051fb559ad 100644 --- a/packages/common/src/directives/ng_component_outlet.ts +++ b/packages/common/src/directives/ng_component_outlet.ts @@ -54,19 +54,19 @@ import { * ### Syntax * * Simple - * ``` + * ```html * * ``` * * With inputs - * ``` + * ```html * * * ``` * * Customized injector/content - * ``` + * ```html * @@ -74,7 +74,7 @@ import { * ``` * * Customized NgModule reference - * ``` + * ```html * * diff --git a/packages/common/src/directives/ng_for_of.ts b/packages/common/src/directives/ng_for_of.ts index 5b1ef33937d..70129bc07c5 100644 --- a/packages/common/src/directives/ng_for_of.ts +++ b/packages/common/src/directives/ng_for_of.ts @@ -81,7 +81,7 @@ export class NgForOfContext = NgIterable> { * The following example shows the shorthand syntax with some options, * contained in an `
  • ` element. * - * ``` + * ```html *
  • ...
    • * ``` * @@ -92,7 +92,7 @@ export class NgForOfContext = NgIterable> { * * Here is the expanded version of the short-form example. * - * ``` + * ```html * *
  • ...
    • *     @@ -116,7 +116,7 @@ export class NgForOfContext = NgIterable> { * `NgForOf` provides exported values that can be aliased to local variables. * For example: * - * ``` + * ```html *
  • * {{i}}/{{users.length}}. {{user}} default *
    • diff --git a/packages/common/src/directives/ng_if.ts b/packages/common/src/directives/ng_if.ts index 9bae223e1d3..793d3d20920 100644 --- a/packages/common/src/directives/ng_if.ts +++ b/packages/common/src/directives/ng_if.ts @@ -31,27 +31,27 @@ import { * * Simple form with shorthand syntax: * - * ``` + * ```html *
    Content to render when condition is true.
    * ``` * * Simple form with expanded syntax: * - * ``` + * ```html *
    Content to render when condition is * true.
     * ``` * * Form with an "else" block: * - * ``` + * ```html *
    Content to render when condition is true.
    * Content to render when condition is false. * ``` * * Shorthand form with "then" and "else" blocks: * - * ``` + * ```html *
    * Content to render when condition is true. * Content to render when condition is false. @@ -59,7 +59,7 @@ import { * * Form with storing the value locally: * - * ``` + * ```html *
    {{value}}
    * Content to render when value is null. * ``` @@ -116,7 +116,7 @@ import { * for the "then" and "else" clauses. For example, consider the following shorthand statement, * that is meant to show a loading page while waiting for data to be loaded. * - * ``` + * ```html *
    * ... *
    @@ -135,7 +135,7 @@ import { * The anchor element containing the template for the "then" clause becomes * the content of this unlabeled `` tag. * - * ``` + * ```html * *
    * ... diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts index 749f6fecf98..78bcab950d3 100644 --- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts +++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts @@ -202,7 +202,7 @@ export interface ImagePlaceholderConfig { * * Step 1: import the `NgOptimizedImage` directive. * - * ```typescript + * ```ts * import { NgOptimizedImage } from '@angular/common'; * * // Include it into the necessary NgModule @@ -227,7 +227,7 @@ export interface ImagePlaceholderConfig { * To use an existing loader for a **third-party image service**: add the provider factory for your * chosen service to the `providers` array. In the example below, the Imgix loader is used: * - * ```typescript + * ```ts * import {provideImgixLoader} from '@angular/common'; * * // Call the function and add the result to the `providers` array: @@ -248,7 +248,7 @@ export interface ImagePlaceholderConfig { * To use a **custom loader**: provide your loader function as a value for the `IMAGE_LOADER` DI * token. * - * ```typescript + * ```ts * import {IMAGE_LOADER, ImageLoaderConfig} from '@angular/common'; * * // Configure the loader using the `IMAGE_LOADER` token. @@ -264,7 +264,7 @@ export interface ImagePlaceholderConfig { * * Step 3: update `` tags in templates to use `ngSrc` instead of `src`. * - * ``` + * ```html * * ``` * diff --git a/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts b/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts index a6d154882d6..413cf21dda3 100644 --- a/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts +++ b/packages/common/src/directives/ng_optimized_image/preconnect_link_checker.ts @@ -30,13 +30,13 @@ const INTERNAL_PRECONNECT_CHECK_BLOCKLIST = new Set(['localhost', '127.0.0.1', ' * from the preconnect checks. It can either be a single string or an array of strings * to represent a group of origins, for example: * - * ```typescript + * ```ts * {provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'} * ``` * * or: * - * ```typescript + * ```ts * {provide: PRECONNECT_CHECK_BLOCKLIST, * useValue: ['https://your-domain-1.com', 'https://your-domain-2.com']} * ``` diff --git a/packages/common/src/directives/ng_plural.ts b/packages/common/src/directives/ng_plural.ts index c5c82305747..109eab90648 100644 --- a/packages/common/src/directives/ng_plural.ts +++ b/packages/common/src/directives/ng_plural.ts @@ -16,7 +16,7 @@ import {SwitchView} from './ng_switch'; * @ngModule CommonModule * * @usageNotes - * ``` + * ```html * * there is nothing * there is one @@ -90,7 +90,7 @@ export class NgPlural { * given expression matches the plural expression according to CLDR rules. * * @usageNotes - * ``` + * ```html * * ... * ... diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts index f318bf18f6c..4a48e1a0079 100644 --- a/packages/common/src/directives/ng_style.ts +++ b/packages/common/src/directives/ng_style.ts @@ -24,19 +24,19 @@ import { * * Set the font of the containing element to the result of an expression. * - * ``` + * ```html * ... * ``` * * Set the width of the containing element to a pixel value returned by an expression. * - * ``` + * ```html * ... * ``` * * Set a collection of style values using an expression that returns key-value pairs. * - * ``` + * ```html * ... * ``` * diff --git a/packages/common/src/directives/ng_switch.ts b/packages/common/src/directives/ng_switch.ts index 2700ff9e580..ae9de788273 100644 --- a/packages/common/src/directives/ng_switch.ts +++ b/packages/common/src/directives/ng_switch.ts @@ -61,14 +61,14 @@ export class SwitchView { * Define a container element for the directive, and specify the switch expression * to match against as an attribute: * - * ``` + * ```html * * ``` * * Within the container, `*ngSwitchCase` statements specify the match expressions * as attributes. Include `*ngSwitchDefault` as the final case. * - * ``` + * ```html * * ... * ... @@ -80,7 +80,7 @@ export class SwitchView { * * The following example shows how to use more than one case to display the same view: * - * ``` + * ```html * * * ... @@ -92,7 +92,7 @@ export class SwitchView { * ``` * * The following example shows how cases can be nested: - * ``` + * ```html * * ... * ... @@ -177,7 +177,7 @@ export class NgSwitch { * Within a switch container, `*ngSwitchCase` statements specify the match expressions * as attributes. Include `*ngSwitchDefault` as the final case. * - * ``` + * ```html * * ... * ... diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts index baccd88b45b..1b9600b45bf 100644 --- a/packages/common/src/directives/ng_template_outlet.ts +++ b/packages/common/src/directives/ng_template_outlet.ts @@ -30,7 +30,7 @@ import { * by the local template `let` declarations. * * @usageNotes - * ``` + * ```html * * ``` * diff --git a/packages/common/src/location/location_strategy.ts b/packages/common/src/location/location_strategy.ts index 7dbf001a8c6..09fa8a6a5e2 100644 --- a/packages/common/src/location/location_strategy.ts +++ b/packages/common/src/location/location_strategy.ts @@ -57,7 +57,7 @@ export abstract class LocationStrategy { * The following example shows how to use this token to configure the root app injector * with a base href value, so that the DI framework can supply the dependency anywhere in the app. * - * ```typescript + * ```ts * import {NgModule} from '@angular/core'; * import {APP_BASE_HREF} from '@angular/common'; * diff --git a/packages/common/src/pipes/date_pipe.ts b/packages/common/src/pipes/date_pipe.ts index e6bba83317c..d41b62381d4 100644 --- a/packages/common/src/pipes/date_pipe.ts +++ b/packages/common/src/pipes/date_pipe.ts @@ -41,14 +41,14 @@ export const DATE_PIPE_DEFAULT_TIMEZONE = new InjectionToken( * For example: * * Override the default date format by providing a value using the token: - * ```typescript + * ```ts * providers: [ * {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}} * ] * ``` * * Override the default timezone by providing a value using the token: - * ```typescript + * ```ts * providers: [ * {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {timezone: '-1200'}} * ] @@ -199,7 +199,7 @@ export const DATE_PIPE_DEFAULT_OPTIONS = new InjectionToken( * * The following component uses a date pipe to display the current date in different formats. * - * ``` + * ```angular-ts * @Component({ * selector: 'date-pipe', * template: `
    diff --git a/packages/compiler-cli/linker/src/file_linker/declaration_scope.ts b/packages/compiler-cli/linker/src/file_linker/declaration_scope.ts index fd0e3f1452e..dd0894d1483 100644 --- a/packages/compiler-cli/linker/src/file_linker/declaration_scope.ts +++ b/packages/compiler-cli/linker/src/file_linker/declaration_scope.ts @@ -11,7 +11,7 @@ * * For example, if you had the following code: * - * ``` + * ```ts * function foo() { * function bar () { * ɵɵngDeclareDirective({...}); diff --git a/packages/compiler-cli/src/ngtsc/core/api/src/public_options.ts b/packages/compiler-cli/src/ngtsc/core/api/src/public_options.ts index b9fbf100367..cb5fe7754b0 100644 --- a/packages/compiler-cli/src/ngtsc/core/api/src/public_options.ts +++ b/packages/compiler-cli/src/ngtsc/core/api/src/public_options.ts @@ -288,14 +288,14 @@ export interface BazelAndG3Options { * * A consumer of such a path-mapped library will write an import like: * - * ```typescript + * ```ts * import {LibModule} from 'lib/deep/path/to/module'; * ``` * * The compiler will attempt to generate imports of directives/pipes from that same module * specifier (the compiler does not rewrite the user's given import path, unlike View Engine). * - * ```typescript + * ```ts * import {LibDir, LibCmp, LibPipe} from 'lib/deep/path/to/module'; * ``` * diff --git a/packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts b/packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts index 1371a48c1d3..0240f4d65c6 100644 --- a/packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts +++ b/packages/compiler-cli/src/ngtsc/diagnostics/src/error_code.ts @@ -308,7 +308,7 @@ export enum ErrorCode { * The tracking expression of a `for` loop block is accessing a variable that is unavailable, * for example: * - * ``` + * ```angular-html * * @for (item of items; track ref) {} * @@ -320,7 +320,7 @@ export enum ErrorCode { * The trigger of a `defer` block cannot access its trigger element, * either because it doesn't exist or it's in a different view. * - * ``` + * ```angular-html * @defer (on interaction(trigger)) {...} * * @@ -334,7 +334,7 @@ export enum ErrorCode { * A control flow node is projected at the root of a component and is preventing its direct * descendants from being projected, because it has more than one root node. * - * ``` + * ```angular-html * * @if (expr) { *
    @@ -376,7 +376,7 @@ export enum ErrorCode { * A two way binding in a template has an incorrect syntax, * parentheses outside brackets. For example: * - * ``` + * ```html *
    * ``` */ @@ -385,7 +385,7 @@ export enum ErrorCode { /** * The left side of a nullish coalescing operation is not nullable. * - * ``` + * ```html * {{ foo ?? bar }} * ``` * When the type of foo doesn't include `null` or `undefined`. @@ -402,7 +402,7 @@ export enum ErrorCode { * A text attribute is not interpreted as a binding but likely intended to be. * * For example: - * ``` + * ```html *
  • {{item["name"]}};
    • * ``` */ @@ -440,7 +440,7 @@ export enum ErrorCode { /** * The left side of an optional chain operation is not nullable. * - * ``` + * ```html * {{ foo?.bar }} * {{ foo?.['bar'] }} * {{ foo?.() }} @@ -453,7 +453,7 @@ export enum ErrorCode { * `ngSkipHydration` should not be a binding (it should be a static attribute). * * For example: - * ``` + * ```html * * ``` * @@ -466,7 +466,7 @@ export enum ErrorCode { * Signal functions should be invoked when interpolated in templates. * * For example: - * ``` + * ```html * {{ mySignal() }} * ``` */ @@ -475,7 +475,7 @@ export enum ErrorCode { /** * Initializer-based APIs can only be invoked from inside of an initializer. * - * ``` + * ```ts * // Allowed * myInput = input(); * @@ -491,7 +491,7 @@ export enum ErrorCode { * A function in an event binding is not called. * * For example: - * ``` + * ```html * * ``` * @@ -504,7 +504,7 @@ export enum ErrorCode { * A `@let` declaration in a template isn't used. * * For example: - * ``` + * ```angular-html * @let used = 1; * @let notUsed = 2; * diff --git a/packages/compiler-cli/src/ngtsc/translator/src/type_emitter.ts b/packages/compiler-cli/src/ngtsc/translator/src/type_emitter.ts index d20bef50aca..e445c34d893 100644 --- a/packages/compiler-cli/src/ngtsc/translator/src/type_emitter.ts +++ b/packages/compiler-cli/src/ngtsc/translator/src/type_emitter.ts @@ -81,7 +81,7 @@ export function canEmitType( * * For example, consider the following code: * - * ``` + * ```ts * import {NgIterable} from '@angular/core'; * * class NgForOf> {} @@ -93,7 +93,7 @@ export function canEmitType( * `NgIterable` type reference to a type reference that is valid in the context in which it is * emitted, for example: * - * ``` + * ```ts * import * as i0 from '@angular/core'; * import * as i1 from '@angular/common'; * diff --git a/packages/compiler-cli/src/ngtsc/typecheck/README.md b/packages/compiler-cli/src/ngtsc/typecheck/README.md index bf7102f10ef..f762d79d330 100644 --- a/packages/compiler-cli/src/ngtsc/typecheck/README.md +++ b/packages/compiler-cli/src/ngtsc/typecheck/README.md @@ -16,7 +16,6 @@ This algorithm relies extensively on TypeScript's ability to rapidly type check To understand and check the types of various operations and structures within templates, the `typecheck` system maps them to TypeScript code, encoding them in such a way as to express the intent of the operation within the type system. - TCBs are not ever emitted, nor are they referenced from any other code (they're unused code as far as TypeScript is concerned). Their _runtime_ effect is therefore unimportant. What matters is that they express to TypeScript the type relationships of directives, bindings, and other entities in the template. Type errors within TCBs translate directly to type errors in the original template. ### Theory @@ -140,7 +139,7 @@ declare function ctor1(inputs: {ngForOf?: Iterable}): NgFor; This type constructor can then be used to infer the instance type of a usage of `NgFor` based on provided bindings. For example, the template: -```html= +```html
    ...
    ``` @@ -186,10 +185,10 @@ function tcb(this: SomeCmp): void { // _t2 is the context type for the embedded views created by the NgFor structural directive. var _t2: any; - + // _t3 is the let-user variable within the embedded view. var _t3 = _t2.$implicit; - + // Represents the `{{user.name}}` interpolation within the embedded view. '' + _t3.name; } @@ -205,7 +204,7 @@ To solve this problem, the template type-checking engine allows structural direc @Directive({selector: '[ngFor]'}) export class NgFor { @Input() ngForOf!: Iterable; - + static ngTemplateContextGuard(dir: NgFor, ctx: any): ctx is NgForContext { return true; // implementation is not important } @@ -227,12 +226,12 @@ function tcb(this: SomeCmp): void { // _t2 is the context type for the embedded views created by the NgFor structural directive. var _t2: any; - + if (NgFor.ngTemplateContextGuard(_t1, _t2)) { // NgFor's ngTemplateContextGuard has narrowed the type of _t2 // based on the type of _t1 (the NgFor directive itself). // Within this `if` block, _t2 is now of type NgForContext. - + // _t3 is the let-user variable within the embedded view. // Because _t2 is narrowed, _t3 is now of type User. var _t3 = _t2.$implicit; @@ -261,10 +260,10 @@ Obviously, if `user` is potentially `null`, then this `NgIf` is intended to only function tcb(this: SomeCmp): void { // Type of the NgIf directive instance. var _t1: NgIf; - + // Binding *ngIf="user != null". _t1.ngIf = this.user !== null; - + // Nested template interpolation `{{user.name}}` '' + this.user.name; } @@ -278,7 +277,7 @@ Similarly to `ngTemplateContextGuard`, the template type checking engine allows @Directive({selector: '[ngIf]'}) export class NgIf { @Input() ngIf!: boolean; - + static ngTemplateGuard_ngIf: 'binding'; } ``` @@ -289,16 +288,16 @@ The presence and type of this static property tells the template type-checking e function tcb(this: SomeCmp): void { // Type of the NgIf directive instance. var _t1: NgIf; - + // Binding *ngIf="user != null". _t1.ngIf = this.user !== null; - + // Guard generated due to the `ngTemplateGuard_ngIf` declaration by the NgIf directive. if (user !== null) { // Nested template interpolation `{{user.name}}`. // `this.user` here is appropriately narrowed to be non-nullable. '' + this.user.name; - } + } } ``` @@ -360,7 +359,6 @@ var t1 = document.createElement('input'); This ordering resolves the forward reference from the original template. - ##### Tracking of `TcbOp`s In practice, a `TcbOp` queue is maintained as an array, where each element begins as a `TcbOp` and is later replaced with the resulting `ts.Expression` once the operation is executed. As `TcbOp`s are generated for various template structures, the index of these operations is recorded. Future dependencies on those operations can then be satisfied by looking in the queue at the appropriate index. The contents will either be a `TcbOp` which has yet to be executed, or the result of the required operation. @@ -412,7 +410,7 @@ function tcb(this: SomeCmp): void { // Generated to break the cycle for `ref` - infers a placeholder // type for the component without using any of its input bindings. var t1 = ctor1(null!); - + // Infer the real type of the component using the `t1` placeholder // type for `ref`. var t2 = ctor1({in: t1.value}); @@ -479,11 +477,11 @@ TypeScript unfortunately cannot consume sourcemaps, only produce them. Therefore Not all template errors will be caught by TypeScript from generated TCB code. The template type checking engine may also detect errors during the creation of the TCB itself. Several classes of errors are caught this way: -* DOM schema errors, like elements that don't exist or attributes that aren't correct. -* Missing pipes. -* Missing `#ref` targets. -* Duplicate `let-variable`s. -* Attempts to write to a `let-variable`. +- DOM schema errors, like elements that don't exist or attributes that aren't correct. +- Missing pipes. +- Missing `#ref` targets. +- Duplicate `let-variable`s. +- Attempts to write to a `let-variable`. These errors manifest as "generation diagnostics", diagnostics which are produced during TCB generation, before TCB code is fed to TypeScript. They're ultimately reported together with any converted TCB diagnostics, but are tracked separately by the type checking system. @@ -534,7 +532,7 @@ interface PrivateInterface { @Directive({selector: '[dir]'}) export class MyDir { @Input() value: T; - + static ngTypeCtor(inputs: {value?: T}): MyDir { return null!; } } ``` @@ -578,7 +576,6 @@ Each TCB is therefore generated in the context of an `Environment`, which loosel During TCB generation, the `Environment` is used to obtain references to imported types, type constructors, and other shared structures. - #### `TypeCheckingConfig` `Environment` also carries the `TypeCheckingConfig`, an options interface which controls the specifics of TCB generation. Through the `TypeCheckingConfig`, a consumer can enable or disable various kinds of strictness checks and other TCB operations. @@ -587,9 +584,9 @@ During TCB generation, the `Environment` is used to obtain references to importe The main interface used by consumers to interact with the template type checking system is the `TemplateTypeChecker`. Methods on this interface allow for various operations related to TCBs, such as: -* Generation of diagnostics. -* Retrieving `Symbol`s (the template equivalent to TypeScript's `ts.Symbol`) for template nodes. -* Retrieving TCB locations suitable for autocompletion operations. +- Generation of diagnostics. +- Retrieving `Symbol`s (the template equivalent to TypeScript's `ts.Symbol`) for template nodes. +- Retrieving TCB locations suitable for autocompletion operations. ### Symbols @@ -641,4 +638,4 @@ Creating such a `ts.Program` is not the responsibility of the `TemplateTypeCheck As a convenience, the type-checking system provides an implementation of this abstraction, the `ReusedProgramStrategy`, which can be used by consumers that manage `ts.Program`s via TypeScript's `ts.createProgram` API. The main compiler uses this strategy to support template type checking. -`ts.Program`s can also be created via Language Service APIs, which would require a different strategy implementation. \ No newline at end of file +`ts.Program`s can also be created via Language Service APIs, which would require a different strategy implementation. diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts index 156a4a36d19..14f6f5070c6 100644 --- a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts +++ b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts @@ -673,7 +673,7 @@ class TcbGenericDirectiveTypeWithAnyParamsOp extends TcbDirectiveTypeOpBase { * The initializer for the variable is the variable expression for the directive, template, or * element the ref refers to. When the reference is used in the template, those TCB statements will * access this variable as well. For example: - * ``` + * ```ts * var _t1 = document.createElement('div'); * var _t2 = _t1; * _t2.value diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_constructor.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_constructor.ts index ca285ef539a..b5604379475 100644 --- a/packages/compiler-cli/src/ngtsc/typecheck/src/type_constructor.ts +++ b/packages/compiler-cli/src/ngtsc/typecheck/src/type_constructor.ts @@ -249,7 +249,7 @@ export function requiresInlineTypeCtor( * fails. This can happen when inferring a complex type from 'any'. For example, if `NgFor`'s * inference is done with the TCB code: * - * ``` + * ```ts * class NgFor { * ngForOf: T[]; * } @@ -260,14 +260,14 @@ export function requiresInlineTypeCtor( * * An invocation looks like: * - * ``` + * ```ts * var _t1 = ctor({ngForOf: [1, 2], ngForTrackBy: null as any, ngForTemplate: null as any}); * ``` * * This correctly infers the type `NgFor` for `_t1`, since `T` is inferred from the * assignment of type `number[]` to `ngForOf`'s type `T[]`. However, if `any` is passed instead: * - * ``` + * ```ts * var _t2 = ctor({ngForOf: [1, 2] as any, ngForTrackBy: null as any, ngForTemplate: null as * any}); * ``` @@ -278,7 +278,7 @@ export function requiresInlineTypeCtor( * Adding a default type to the generic declaration in the constructor solves this problem, as * the default type will be used in the event that inference fails. * - * ``` + * ```ts * declare function ctor(o: Pick, 'ngForOf'>): NgFor; * * var _t3 = ctor({ngForOf: [1, 2] as any}); diff --git a/packages/compiler/src/compiler_facade_interface.ts b/packages/compiler/src/compiler_facade_interface.ts index 6af9249b84c..be965e55cdc 100644 --- a/packages/compiler/src/compiler_facade_interface.ts +++ b/packages/compiler/src/compiler_facade_interface.ts @@ -15,7 +15,7 @@ * - packages/core/src/compiler/compiler_facade_interface.ts (replica) * * Please ensure that the two files are in sync using this command: - * ``` + * ```shell * cp packages/compiler/src/compiler_facade_interface.ts \ * packages/core/src/compiler/compiler_facade_interface.ts * ``` diff --git a/packages/compiler/src/ml_parser/icu_ast_expander.ts b/packages/compiler/src/ml_parser/icu_ast_expander.ts index 1b2e59159b2..3e615cd4921 100644 --- a/packages/compiler/src/ml_parser/icu_ast_expander.ts +++ b/packages/compiler/src/ml_parser/icu_ast_expander.ts @@ -28,7 +28,7 @@ const PLURAL_CASES: string[] = ['zero', 'one', 'two', 'few', 'many', 'other']; * * will be expanded into * - * ``` + * ```html * * zero * one diff --git a/packages/compiler/src/render3/r3_class_metadata_compiler.ts b/packages/compiler/src/render3/r3_class_metadata_compiler.ts index e7171d9e80a..adc42e902ec 100644 --- a/packages/compiler/src/render3/r3_class_metadata_compiler.ts +++ b/packages/compiler/src/render3/r3_class_metadata_compiler.ts @@ -64,7 +64,7 @@ function internalCompileClassMetadata(metadata: R3ClassMetadata): o.InvokeFuncti * loads dependencies from `@defer` blocks. * * Generates a call like this: - * ``` + * ```ts * setClassMetadataAsync(type, () => [ * import('./cmp-a').then(m => m.CmpA); * import('./cmp-b').then(m => m.CmpB); diff --git a/packages/compiler/src/render3/util.ts b/packages/compiler/src/render3/util.ts index 4fbbbff630f..516bc5467ab 100644 --- a/packages/compiler/src/render3/util.ts +++ b/packages/compiler/src/render3/util.ts @@ -157,7 +157,7 @@ export function convertFromMaybeForwardRefExpression({ /** * Generate an expression that has the given `expr` wrapped in the following form: * - * ``` + * ```ts * forwardRef(() => expr) * ``` */ diff --git a/packages/compiler/src/render3/view/i18n/get_msg_utils.ts b/packages/compiler/src/render3/view/i18n/get_msg_utils.ts index c92c6d5a8ee..950ff2c8521 100644 --- a/packages/compiler/src/render3/view/i18n/get_msg_utils.ts +++ b/packages/compiler/src/render3/view/i18n/get_msg_utils.ts @@ -25,7 +25,7 @@ const GOOG_GET_MSG = 'goog.getMsg'; * * Generates: * - * ```typescript + * ```ts * const MSG_FOO = goog.getMsg( * // Message template. * 'Sent from {$interpolation} to {$startTagSpan}{$interpolation_1}{$closeTagSpan}.', diff --git a/packages/compiler/src/render3/view/query_generation.ts b/packages/compiler/src/render3/view/query_generation.ts index ad799b0117e..afba57860d4 100644 --- a/packages/compiler/src/render3/view/query_generation.ts +++ b/packages/compiler/src/render3/view/query_generation.ts @@ -131,7 +131,7 @@ const queryAdvancePlaceholder = Symbol('queryAdvancePlaceholder'); * * --> will turn into * - * ``` + * ```ts * bla(); * queryAdvance(2); * bla(); diff --git a/packages/compiler/src/template/pipeline/src/phases/chaining.ts b/packages/compiler/src/template/pipeline/src/phases/chaining.ts index 1f0c15e39ed..050123e0867 100644 --- a/packages/compiler/src/template/pipeline/src/phases/chaining.ts +++ b/packages/compiler/src/template/pipeline/src/phases/chaining.ts @@ -56,14 +56,14 @@ const MAX_CHAIN_LENGTH = 256; * * For example, two `elementStart` operations in sequence: * - * ```typescript + * ```ts * elementStart(0, 'div'); * elementStart(1, 'span'); * ``` * * Can be called as a chain instead: * - * ```typescript + * ```ts * elementStart(0, 'div')(1, 'span'); * ``` */ diff --git a/packages/compiler/src/template/pipeline/src/phases/i18n_const_collection.ts b/packages/compiler/src/template/pipeline/src/phases/i18n_const_collection.ts index dda66e2af7c..714d26951d6 100644 --- a/packages/compiler/src/template/pipeline/src/phases/i18n_const_collection.ts +++ b/packages/compiler/src/template/pipeline/src/phases/i18n_const_collection.ts @@ -319,7 +319,7 @@ function addSubMessageParams( /** * Generate statements that define a given translation message. * - * ``` + * ```ts * var I18N_1; * if (typeof ngI18nClosureMode !== undefined && ngI18nClosureMode) { * var MSG_EXTERNAL_XXX = goog.getMsg( @@ -375,7 +375,7 @@ function getTranslationDeclStmts( * Create the expression that will be used to guard the closure mode block * It is equivalent to: * - * ``` + * ```ts * typeof ngI18nClosureMode !== undefined && ngI18nClosureMode * ``` */ diff --git a/packages/compiler/test/compiler_facade_interface_spec.ts b/packages/compiler/test/compiler_facade_interface_spec.ts index 26d56d3d343..90b5d236e16 100644 --- a/packages/compiler/test/compiler_facade_interface_spec.ts +++ b/packages/compiler/test/compiler_facade_interface_spec.ts @@ -19,7 +19,7 @@ import * as compiler from '../src/compiler_facade_interface'; * - packages/core/src/render3/jit/compiler_facade_interface.ts (copy) * * Please ensure that the two files are in sync using this command: - * ``` + * ```shell * cp packages/compiler/src/compiler_facade_interface.ts \ * packages/core/src/render3/jit/compiler_facade_interface.ts * ``` diff --git a/packages/core/schematics/migrations/signal-migration/src/flow_analysis/index.ts b/packages/core/schematics/migrations/signal-migration/src/flow_analysis/index.ts index 496162d17ac..d6c17631c17 100644 --- a/packages/core/schematics/migrations/signal-migration/src/flow_analysis/index.ts +++ b/packages/core/schematics/migrations/signal-migration/src/flow_analysis/index.ts @@ -70,7 +70,7 @@ type ReferenceMetadata = Map< * * E.g. consider the following snippet: * - * ``` + * ```ts * someMethod() { * if (this.bla) { * this.bla.charAt(0); diff --git a/packages/core/schematics/migrations/signal-migration/src/passes/4_check_inheritance.ts b/packages/core/schematics/migrations/signal-migration/src/passes/4_check_inheritance.ts index 512fc19522c..15fc9529e65 100644 --- a/packages/core/schematics/migrations/signal-migration/src/passes/4_check_inheritance.ts +++ b/packages/core/schematics/migrations/signal-migration/src/passes/4_check_inheritance.ts @@ -16,7 +16,7 @@ import {checkInheritanceOfKnownFields} from './problematic_patterns/check_inheri * Phase that propagates incompatibilities to derived classes or * base classes. For example, consider: * - * ``` + * ```ts * class Base { * bla = true; * } diff --git a/packages/core/schematics/migrations/signal-migration/src/passes/problematic_patterns/check_inheritance.ts b/packages/core/schematics/migrations/signal-migration/src/passes/problematic_patterns/check_inheritance.ts index 136cbc46573..95ac9860dc9 100644 --- a/packages/core/schematics/migrations/signal-migration/src/passes/problematic_patterns/check_inheritance.ts +++ b/packages/core/schematics/migrations/signal-migration/src/passes/problematic_patterns/check_inheritance.ts @@ -25,7 +25,7 @@ export interface InheritanceTracker { * Phase that propagates incompatibilities to derived classes or * base classes. For example, consider: * - * ``` + * ```ts * class Base { * bla = true; * } diff --git a/packages/core/schematics/migrations/signal-migration/src/passes/reference_migration/migrate_ts_references.ts b/packages/core/schematics/migrations/signal-migration/src/passes/reference_migration/migrate_ts_references.ts index 9951d635f77..f14388321f4 100644 --- a/packages/core/schematics/migrations/signal-migration/src/passes/reference_migration/migrate_ts_references.ts +++ b/packages/core/schematics/migrations/signal-migration/src/passes/reference_migration/migrate_ts_references.ts @@ -23,7 +23,7 @@ import {ReferenceMigrationHost} from './reference_migration_host'; * The phase takes care of control flow analysis and generates temporary variables * where needed to ensure narrowing continues to work. E.g. * - * ``` + * ```ts * someMethod() { * if (this.input) { * this.input.charAt(0); @@ -33,7 +33,7 @@ import {ReferenceMigrationHost} from './reference_migration_host'; * * will be transformed into: * - * ``` + * ```ts * someMethod() { * const input_1 = this.input(); * if (input_1) { diff --git a/packages/core/schematics/ng-generate/inject-migration/internal.ts b/packages/core/schematics/ng-generate/inject-migration/internal.ts index d3d99af3d4d..8c94033f3dd 100644 --- a/packages/core/schematics/ng-generate/inject-migration/internal.ts +++ b/packages/core/schematics/ng-generate/inject-migration/internal.ts @@ -21,7 +21,7 @@ interface CombineCandidate { * Finds class property declarations without initializers whose constructor-based initialization * can be inlined into the declaration spot after migrating to `inject`. For example: * - * ``` + * ```ts * private foo: number; * * constructor(private service: MyService) { @@ -103,7 +103,7 @@ export function findUninitializedPropertiesToCombine( * The internal-specific migration will combine such properties which will result in a compilation * error, for example: * - * ``` + * ```ts * class MyClass { * foo: Foo; * bar: Bar; @@ -117,7 +117,7 @@ export function findUninitializedPropertiesToCombine( * * Will become: * - * ``` + * ```ts * class MyClass { * foo: Foo = this.bar.getFoo(); * bar: Bar = inject(Bar); @@ -179,7 +179,7 @@ export function shouldCombineInInitializationOrder( /** * Finds the expressions from the constructor that initialize class members, for example: * - * ``` + * ```ts * private foo: number; * * constructor() { diff --git a/packages/core/schematics/utils/typescript/imports.ts b/packages/core/schematics/utils/typescript/imports.ts index 428c2d34efc..ed5450d1c29 100644 --- a/packages/core/schematics/utils/typescript/imports.ts +++ b/packages/core/schematics/utils/typescript/imports.ts @@ -49,7 +49,7 @@ export function getImportOfIdentifier( * Gets a top-level import specifier with a specific name that is imported from a particular module. * E.g. given a file that looks like: * - * ``` + * ```ts * import { Component, Directive } from '@angular/core'; * import { Foo } from './foo'; * ``` diff --git a/packages/core/src/application/application_init.ts b/packages/core/src/application/application_init.ts index c35fda4b9c9..62bca65a11f 100644 --- a/packages/core/src/application/application_init.ts +++ b/packages/core/src/application/application_init.ts @@ -45,7 +45,7 @@ import {isPromise, isSubscribable} from '../util/lang'; * The following example illustrates how to configure a multi-provider using `APP_INITIALIZER` token * and a function returning a promise. * ### Example with NgModule-based application - * ``` + * ```ts * function initializeApp(): Promise { * const http = inject(HttpClient); * return firstValueFrom( @@ -69,7 +69,7 @@ import {isPromise, isSubscribable} from '../util/lang'; * ``` * * ### Example with standalone application - * ``` + * ```ts * function initializeApp() { * const http = inject(HttpClient); * return firstValueFrom( @@ -99,7 +99,7 @@ import {isPromise, isSubscribable} from '../util/lang'; * through DI. * * ### Example with NgModule-based application - * ``` + * ```ts * function initializeApp() { * const http = inject(HttpClient); * return firstValueFrom( @@ -123,7 +123,7 @@ import {isPromise, isSubscribable} from '../util/lang'; * ``` * * ### Example with standalone application - * ``` + * ```ts * function initializeApp() { * const http = inject(HttpClient); * return firstValueFrom( @@ -171,7 +171,7 @@ export const APP_INITIALIZER = new InjectionToken< * @usageNotes * The following example illustrates how to configure an initialization function using * `provideAppInitializer()` - * ``` + * ```ts * bootstrapApplication(App, { * providers: [ * provideAppInitializer(() => { diff --git a/packages/core/src/application/application_ref.ts b/packages/core/src/application/application_ref.ts index f0723adca41..8184c761dd1 100644 --- a/packages/core/src/application/application_ref.ts +++ b/packages/core/src/application/application_ref.ts @@ -224,7 +224,7 @@ export function optionsReducer(dst: T, objs: T | T[]): T { * (here incrementing a counter, using RxJS `interval`), * and at the same time subscribe to `isStable`. * - * ``` + * ```ts * constructor(appRef: ApplicationRef) { * appRef.isStable.pipe( * filter(stable => stable) @@ -239,7 +239,7 @@ export function optionsReducer(dst: T, objs: T | T[]): T { * you have to wait for the application to be stable * before starting your polling process. * - * ``` + * ```ts * constructor(appRef: ApplicationRef) { * appRef.isStable.pipe( * first(stable => stable), @@ -259,7 +259,7 @@ export function optionsReducer(dst: T, objs: T | T[]): T { * you update a field of your component * and display it in its template. * - * ``` + * ```ts * constructor(appRef: ApplicationRef) { * appRef.isStable.pipe( * first(stable => stable), @@ -273,7 +273,7 @@ export function optionsReducer(dst: T, objs: T | T[]): T { * * You'll have to manually trigger the change detection to update the template. * - * ``` + * ```ts * constructor(appRef: ApplicationRef, cd: ChangeDetectorRef) { * appRef.isStable.pipe( * first(stable => stable), @@ -287,7 +287,7 @@ export function optionsReducer(dst: T, objs: T | T[]): T { * * Or make the subscription callback run inside the zone. * - * ``` + * ```ts * constructor(appRef: ApplicationRef, zone: NgZone) { * appRef.isStable.pipe( * first(stable => stable), diff --git a/packages/core/src/application/application_tokens.ts b/packages/core/src/application/application_tokens.ts index 40ba815879f..3b69628037f 100644 --- a/packages/core/src/application/application_tokens.ts +++ b/packages/core/src/application/application_tokens.ts @@ -18,7 +18,7 @@ import {getDocument} from '../render3/interfaces/document'; * (for example, using `bootstrapApplication` calls). In this case, ensure that those applications * have different `APP_ID` value setup. For example: * - * ``` + * ```ts * bootstrapApplication(ComponentA, { * providers: [ * { provide: APP_ID, useValue: 'app-a' }, diff --git a/packages/core/src/authoring/input/input.ts b/packages/core/src/authoring/input/input.ts index 777adf46447..8ad910bde66 100644 --- a/packages/core/src/authoring/input/input.ts +++ b/packages/core/src/authoring/input/input.ts @@ -118,7 +118,7 @@ export interface InputFunction { * @usageNotes * To use signal-based inputs, import `input` from `@angular/core`. * - * ``` + * ```ts * import {input} from '@angular/core`; * ``` * diff --git a/packages/core/src/authoring/model/model.ts b/packages/core/src/authoring/model/model.ts index f18be89c23e..e1c3b6de99a 100644 --- a/packages/core/src/authoring/model/model.ts +++ b/packages/core/src/authoring/model/model.ts @@ -68,7 +68,7 @@ export interface ModelFunction { * * To use `model()`, import the function from `@angular/core`. * - * ``` + * ```ts * import {model} from '@angular/core`; * ``` * diff --git a/packages/core/src/authoring/queries.ts b/packages/core/src/authoring/queries.ts index a929cda7f2a..91dbcecdfad 100644 --- a/packages/core/src/authoring/queries.ts +++ b/packages/core/src/authoring/queries.ts @@ -95,7 +95,7 @@ export interface ViewChildFunction { * Create a child query in your component by declaring a * class field and initializing it with the `viewChild()` function. * - * ```ts + * ```angular-ts * @Component({template: '
    '}) * export class TestComponent { * divEl = viewChild('el'); // Signal diff --git a/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts b/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts index da5b7378526..381d4b3191e 100644 --- a/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts +++ b/packages/core/src/change_detection/scheduling/ng_zone_scheduling.ts @@ -137,7 +137,7 @@ export function internalProvideZoneChangeDetection({ * `BootstrapOptions` instead. * * @usageNotes - * ```typescript + * ```ts * bootstrapApplication(MyApp, {providers: [ * provideZoneChangeDetection({eventCoalescing: true}), * ]}); diff --git a/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts b/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts index 81d741ca2ca..433c7f95663 100644 --- a/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts +++ b/packages/core/src/change_detection/scheduling/zoneless_scheduling_impl.ts @@ -364,7 +364,7 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler { * - registering a render hook (templates are only refreshed if render hooks do one of the above) * * @usageNotes - * ```typescript + * ```ts * bootstrapApplication(MyApp, {providers: [ * provideExperimentalZonelessChangeDetection(), * ]}); diff --git a/packages/core/src/compiler/compiler_facade_interface.ts b/packages/core/src/compiler/compiler_facade_interface.ts index dd2c33ba149..26335e8a300 100644 --- a/packages/core/src/compiler/compiler_facade_interface.ts +++ b/packages/core/src/compiler/compiler_facade_interface.ts @@ -15,7 +15,7 @@ * - packages/core/src/compiler/compiler_facade_interface.ts (replica) * * Please ensure that the two files are in sync using this command: - * ``` + * ```shell * cp packages/compiler/src/compiler_facade_interface.ts \ * packages/core/src/compiler/compiler_facade_interface.ts * ``` diff --git a/packages/core/src/di/forward_ref.ts b/packages/core/src/di/forward_ref.ts index bb3fcd3d204..d25872167d1 100644 --- a/packages/core/src/di/forward_ref.ts +++ b/packages/core/src/di/forward_ref.ts @@ -39,7 +39,7 @@ const __forward_ref__ = getClosureSafeProperty({__forward_ref__: getClosureSafeP * {@example core/di/ts/forward_ref/forward_ref_spec.ts region='forward_ref'} * * ### Circular standalone reference import example - * ```ts + * ```angular-ts * @Component({ * standalone: true, * imports: [ChildComponent], diff --git a/packages/core/src/di/host_attribute_token.ts b/packages/core/src/di/host_attribute_token.ts index 485495504c7..35c37f211e2 100644 --- a/packages/core/src/di/host_attribute_token.ts +++ b/packages/core/src/di/host_attribute_token.ts @@ -13,7 +13,7 @@ import {ɵɵinjectAttribute} from '../render3/instructions/di_attr'; * * @usageNotes * ### Injecting an attribute that is known to exist - * ```typescript + * ```ts * @Directive() * class MyDir { * attr: string = inject(new HostAttributeToken('some-attr')); @@ -21,7 +21,7 @@ import {ɵɵinjectAttribute} from '../render3/instructions/di_attr'; * ``` * * ### Optionally injecting an attribute - * ```typescript + * ```ts * @Directive() * class MyDir { * attr: string | null = inject(new HostAttributeToken('some-attr'), {optional: true}); diff --git a/packages/core/src/di/host_tag_name_token.ts b/packages/core/src/di/host_tag_name_token.ts index 0d9b71da588..57c0b781bf3 100644 --- a/packages/core/src/di/host_tag_name_token.ts +++ b/packages/core/src/di/host_tag_name_token.ts @@ -18,7 +18,7 @@ import {InjectFlags} from './interface/injector'; * * @usageNotes * ### Injecting a tag name that is known to exist - * ```typescript + * ```ts * @Directive() * class MyDir { * tagName: string = inject(HOST_TAG_NAME); @@ -26,7 +26,7 @@ import {InjectFlags} from './interface/injector'; * ``` * * ### Optionally injecting a tag name - * ```typescript + * ```ts * @Directive() * class MyDir { * tagName: string | null = inject(HOST_TAG_NAME, {optional: true}); diff --git a/packages/core/src/di/injector_compatibility.ts b/packages/core/src/di/injector_compatibility.ts index ecf768bd0c1..be68924a1d4 100644 --- a/packages/core/src/di/injector_compatibility.ts +++ b/packages/core/src/di/injector_compatibility.ts @@ -223,7 +223,7 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s * In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a * field initializer: * - * ```typescript + * ```ts * @Injectable({providedIn: 'root'}) * export class Car { * radio: Radio|undefined; @@ -239,7 +239,7 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s * * It is also legal to call `inject` from a provider's factory: * - * ```typescript + * ```ts * providers: [ * {provide: Car, useFactory: () => { * // OK: a class factory @@ -253,7 +253,7 @@ export function inject(token: HostAttributeToken, options: {optional: false}): s * notably, calls to `inject()` are disallowed after a class instance was created, in methods * (including lifecycle hooks): * - * ```typescript + * ```ts * @Component({ ... }) * export class CarComponent { * ngOnInit() { diff --git a/packages/core/src/di/provider_collection.ts b/packages/core/src/di/provider_collection.ts index c7fd446f0b8..71c891d671e 100644 --- a/packages/core/src/di/provider_collection.ts +++ b/packages/core/src/di/provider_collection.ts @@ -63,7 +63,7 @@ export function makeEnvironmentProviders( * @usageNotes * The following example illustrates how to configure an initialization function using * `provideEnvironmentInitializer()` - * ``` + * ```ts * createEnvironmentInjector( * [ * provideEnvironmentInitializer(() => { @@ -115,7 +115,7 @@ type WalkProviderTreeVisitor = ( * @usageNotes * The results of the `importProvidersFrom` call can be used in the `bootstrapApplication` call: * - * ```typescript + * ```ts * await bootstrapApplication(RootComponent, { * providers: [ * importProvidersFrom(NgModuleOne, NgModuleTwo) @@ -126,7 +126,7 @@ type WalkProviderTreeVisitor = ( * You can also use the `importProvidersFrom` results in the `providers` field of a route, when a * standalone component is used: * - * ```typescript + * ```ts * export const ROUTES: Route[] = [ * { * path: 'foo', diff --git a/packages/core/src/error_handler.ts b/packages/core/src/error_handler.ts index b48046f5ff1..11c723a4823 100644 --- a/packages/core/src/error_handler.ts +++ b/packages/core/src/error_handler.ts @@ -19,7 +19,7 @@ import {NgZone} from './zone'; * @usageNotes * ### Example * - * ``` + * ```ts * class MyErrorHandler implements ErrorHandler { * handleError(error) { * // do something with the exception diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts index 35577463a27..d18f24cd141 100644 --- a/packages/core/src/errors.ts +++ b/packages/core/src/errors.ts @@ -144,7 +144,7 @@ export const enum RuntimeErrorCode { * Formats and outputs the error message in a consistent way. * * Example: - * ``` + * ```ts * throw new RuntimeError( * RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED, * ngDevMode && 'Injector has already been destroyed.'); diff --git a/packages/core/src/event_emitter.ts b/packages/core/src/event_emitter.ts index de0ce0e854b..e6f47cc722a 100644 --- a/packages/core/src/event_emitter.ts +++ b/packages/core/src/event_emitter.ts @@ -30,7 +30,7 @@ import {PendingTasksInternal} from './pending_tasks'; * that create event emitters. When the title is clicked, the emitter * emits an open or close event to toggle the current visibility state. * - * ```html + * ```angular-ts * @Component({ * selector: 'zippy', * template: ` diff --git a/packages/core/src/i18n/tokens.ts b/packages/core/src/i18n/tokens.ts index 1758c6c3c31..65448ef32d5 100644 --- a/packages/core/src/i18n/tokens.ts +++ b/packages/core/src/i18n/tokens.ts @@ -55,7 +55,7 @@ export function getGlobalLocale(): string { * @usageNotes * ### Example * - * ```typescript + * ```ts * import { LOCALE_ID } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; @@ -100,7 +100,7 @@ export const LOCALE_ID: InjectionToken = new InjectionToken(ngDevMode ? * @usageNotes * ### Example * - * ```typescript + * ```ts * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; * @@ -128,7 +128,7 @@ export const DEFAULT_CURRENCY_CODE = new InjectionToken( * @usageNotes * ### Example * - * ```typescript + * ```ts * import { TRANSLATIONS } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; @@ -154,7 +154,7 @@ export const TRANSLATIONS = new InjectionToken(ngDevMode ? 'Translations * @usageNotes * ### Example * - * ```typescript + * ```ts * import { TRANSLATIONS_FORMAT } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; @@ -181,7 +181,7 @@ export const TRANSLATIONS_FORMAT = new InjectionToken( * * @usageNotes * ### Example - * ```typescript + * ```ts * import { MissingTranslationStrategy } from '@angular/core'; * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; * import { AppModule } from './app/app.module'; diff --git a/packages/core/src/interface/type.ts b/packages/core/src/interface/type.ts index 90b1e54bf4e..6d1fd19632a 100644 --- a/packages/core/src/interface/type.ts +++ b/packages/core/src/interface/type.ts @@ -43,18 +43,18 @@ export interface Type extends Function { * * USAGE: * Given: - * ``` + * ```ts * interface Person {readonly name: string} * ``` * * We would like to get a read/write version of `Person`. - * ``` + * ```ts * const WritablePerson = Writable; * ``` * * The result is that you can do: * - * ``` + * ```ts * const readonlyPerson: Person = {name: 'Marry'}; * readonlyPerson.name = 'John'; // TypeError * (readonlyPerson as WritablePerson).name = 'John'; // OK diff --git a/packages/core/src/linker/destroy_ref.ts b/packages/core/src/linker/destroy_ref.ts index e16bcbc9443..92254d88d38 100644 --- a/packages/core/src/linker/destroy_ref.ts +++ b/packages/core/src/linker/destroy_ref.ts @@ -31,7 +31,7 @@ export abstract class DestroyRef { * * @usageNotes * ### Example - * ```typescript + * ```ts * const destroyRef = inject(DestroyRef); * * // register a destroy callback diff --git a/packages/core/src/linker/query_list.ts b/packages/core/src/linker/query_list.ts index 860a8db3092..9122738b9d9 100644 --- a/packages/core/src/linker/query_list.ts +++ b/packages/core/src/linker/query_list.ts @@ -34,7 +34,7 @@ function symbolIterator(this: QueryList): Iterator { * * @usageNotes * ### Example - * ```typescript + * ```ts * @Component({...}) * class Container { * @ViewChildren(Item) items:QueryList; diff --git a/packages/core/src/linker/view_container_ref.ts b/packages/core/src/linker/view_container_ref.ts index f4b7c1a6c15..76549fa754b 100644 --- a/packages/core/src/linker/view_container_ref.ts +++ b/packages/core/src/linker/view_container_ref.ts @@ -101,7 +101,7 @@ import {EmbeddedViewRef, ViewRef} from './view_ref'; * Note: the example uses standalone components, but the function can also be used for * non-standalone components (declared in an NgModule) as well. * - * ```typescript + * ```angular-ts * @Component({ * standalone: true, * selector: 'dynamic', diff --git a/packages/core/src/linker/view_ref.ts b/packages/core/src/linker/view_ref.ts index ef684ba61cd..d9423a0df3d 100644 --- a/packages/core/src/linker/view_ref.ts +++ b/packages/core/src/linker/view_ref.ts @@ -53,7 +53,7 @@ export abstract class ViewRef extends ChangeDetectorRef { * The following template breaks down into two separate `TemplateRef` instances, * an outer one and an inner one. * - * ``` + * ```html * Count: {{items.length}} *
      *
    • {{item}}
      • @@ -62,7 +62,7 @@ export abstract class ViewRef extends ChangeDetectorRef { * * This is the outer `TemplateRef`: * - * ``` + * ```html * Count: {{items.length}} *
        * @@ -71,13 +71,13 @@ export abstract class ViewRef extends ChangeDetectorRef { * * This is the inner `TemplateRef`: * - * ``` + * ```html *
      • {{item}}
        • * ``` * * The outer and inner `TemplateRef` instances are assembled into views as follows: * - * ``` + * ```html * * Count: 2 *
          diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts index 5576e60f76b..3f4b9c884fe 100644 --- a/packages/core/src/metadata/directives.ts +++ b/packages/core/src/metadata/directives.ts @@ -164,7 +164,7 @@ export interface Directive { * * The following example creates a component with two data-bound properties. * - * ```typescript + * ```ts * @Component({ * selector: 'bank-account', * inputs: ['bankName', {name: 'id', alias: 'account-id'}], @@ -204,7 +204,7 @@ export interface Directive { * * @usageNotes * - * ```typescript + * ```ts * @Component({ * selector: 'child-dir', * outputs: [ 'bankNameChange' ], @@ -714,7 +714,7 @@ export interface PipeDecorator { * For example, if the name is "myPipe", use a template binding expression * such as the following: * - * ``` + * ```html * {{ exp | myPipe }} * ``` * @@ -801,7 +801,7 @@ export interface InputDecorator { * The following example creates a component with two input properties, * one of which is given a special binding name. * - * ```typescript + * ```ts * import { Component, Input, numberAttribute, booleanAttribute } from '@angular/core'; * @Component({ * selector: 'bank-account', @@ -953,7 +953,7 @@ export interface HostBindingDecorator { * The following example creates a directive that sets the `valid` and `invalid` * class, a style color, and an id on the DOM element that has an `ngModel` directive on it. * - * ```typescript + * ```ts * @Directive({selector: '[ngModel]'}) * class NgModelStatus { * constructor(public control: NgModel) {} diff --git a/packages/core/src/metadata/do_bootstrap.ts b/packages/core/src/metadata/do_bootstrap.ts index 71acda8df79..9fe8b151673 100644 --- a/packages/core/src/metadata/do_bootstrap.ts +++ b/packages/core/src/metadata/do_bootstrap.ts @@ -21,7 +21,7 @@ import {ApplicationRef} from '../application/application_ref'; * The example below uses `ApplicationRef.bootstrap()` to render the * `AppComponent` on the page. * - * ```typescript + * ```ts * class AppModule implements DoBootstrap { * ngDoBootstrap(appRef: ApplicationRef) { * appRef.bootstrap(AppComponent); // Or some other component diff --git a/packages/core/src/metadata/resource_loading.ts b/packages/core/src/metadata/resource_loading.ts index b71f8325a50..c17a1ab4f64 100644 --- a/packages/core/src/metadata/resource_loading.ts +++ b/packages/core/src/metadata/resource_loading.ts @@ -14,7 +14,7 @@ import {Component} from './directives'; * Used to resolve resource URLs on `@Component` when used with JIT compilation. * * Example: - * ``` + * ```ts * @Component({ * selector: 'my-comp', * templateUrl: 'my-comp.html', // This requires asynchronous resolution diff --git a/packages/core/src/pending_tasks.ts b/packages/core/src/pending_tasks.ts index 55fbcb369c3..b9042a81bbe 100644 --- a/packages/core/src/pending_tasks.ts +++ b/packages/core/src/pending_tasks.ts @@ -74,7 +74,7 @@ export class PendingTasksInternal implements OnDestroy { * - tests might want to delay assertions until the application becomes stable; * * @usageNotes - * ```typescript + * ```ts * const pendingTasks = inject(PendingTasks); * const taskCleanup = pendingTasks.add(); * // do work that should block application's stability and then: diff --git a/packages/core/src/platform/platform_ref.ts b/packages/core/src/platform/platform_ref.ts index 69d4eeef203..9ac30bacc75 100644 --- a/packages/core/src/platform/platform_ref.ts +++ b/packages/core/src/platform/platform_ref.ts @@ -92,7 +92,7 @@ export class PlatformRef { * @usageNotes * ### Simple Example * - * ```typescript + * ```ts * @NgModule({ * imports: [BrowserModule] * }) diff --git a/packages/core/src/reflection/reflection_capabilities.ts b/packages/core/src/reflection/reflection_capabilities.ts index f89a4df12a2..fc5639c6552 100644 --- a/packages/core/src/reflection/reflection_capabilities.ts +++ b/packages/core/src/reflection/reflection_capabilities.ts @@ -25,19 +25,19 @@ import {PlatformReflectionCapabilities} from './platform_reflection_capabilities * it intends to capture the pattern where existing constructors have been downleveled from * ES2015 to ES5 using TypeScript w/ downlevel iteration. e.g. * - * ``` + * ```ts * function MyClass() { * var _this = _super.apply(this, arguments) || this; * ``` * * downleveled to ES5 with `downlevelIteration` for TypeScript < 4.2: - * ``` + * ```ts * function MyClass() { * var _this = _super.apply(this, __spread(arguments)) || this; * ``` * * or downleveled to ES5 with `downlevelIteration` for TypeScript >= 4.2: - * ``` + * ```ts * function MyClass() { * var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this; * ``` diff --git a/packages/core/src/render3/after_render/hooks.ts b/packages/core/src/render3/after_render/hooks.ts index b711d73b06d..faae30a83e4 100644 --- a/packages/core/src/render3/after_render/hooks.ts +++ b/packages/core/src/render3/after_render/hooks.ts @@ -125,7 +125,7 @@ export interface AfterRenderOptions { * Use `afterRender` to read or write the DOM after each render. * * ### Example - * ```ts + * ```angular-ts * @Component({ * selector: 'my-cmp', * template: `{{ ... }}`, @@ -187,7 +187,7 @@ export function afterRender( * Use `afterRender` to read or write the DOM after each render. * * ### Example - * ```ts + * ```angular-ts * @Component({ * selector: 'my-cmp', * template: `{{ ... }}`, @@ -297,7 +297,7 @@ export function afterRender( * for example to initialize a non-Angular library. * * ### Example - * ```ts + * ```angular-ts * @Component({ * selector: 'my-chart-cmp', * template: `
          {{ ... }}
          `, @@ -360,7 +360,7 @@ export function afterNextRender( * for example to initialize a non-Angular library. * * ### Example - * ```ts + * ```angular-ts * @Component({ * selector: 'my-chart-cmp', * template: `
          {{ ... }}
          `, diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index cb2a1d350cd..c8111097dea 100644 --- a/packages/core/src/render3/component.ts +++ b/packages/core/src/render3/component.ts @@ -27,7 +27,7 @@ import {assertComponentDef} from './errors'; * Note: the example uses standalone components, but the function can also be used for * non-standalone components (declared in an NgModule) as well. * - * ```typescript + * ```angular-ts * @Component({ * standalone: true, * template: `Hello {{ name }}!` @@ -150,7 +150,7 @@ export interface ComponentMirror { * The example below demonstrates how to use the function and how the fields * of the returned object map to the component metadata. * - * ```typescript + * ```angular-ts * @Component({ * standalone: true, * selector: 'foo-component', diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts index 37e2996e703..80862a6a44e 100644 --- a/packages/core/src/render3/component_ref.ts +++ b/packages/core/src/render3/component_ref.ts @@ -685,7 +685,7 @@ function projectNodes( * * Example: * - * ``` + * ```ts * renderComponent(AppComponent, {hostFeatures: [LifecycleHooksFeature]}); * ``` */ diff --git a/packages/core/src/render3/definition.ts b/packages/core/src/render3/definition.ts index dee27d84135..6b022c06d14 100644 --- a/packages/core/src/render3/definition.ts +++ b/packages/core/src/render3/definition.ts @@ -46,7 +46,7 @@ import {StandaloneService} from './standalone_service'; * Map of inputs for a given directive/component. * * Given: - * ``` + * ```ts * class MyComponent { * @Input() * publicInput1: string; @@ -62,7 +62,7 @@ import {StandaloneService} from './standalone_service'; * ``` * * is described as: - * ``` + * ```ts * { * publicInput1: 'publicInput1', * declaredInput2: [InputFlags.None, 'declaredInput2', 'publicInput2'], @@ -77,7 +77,7 @@ import {StandaloneService} from './standalone_service'; * ``` * * Which the minifier may translate to: - * ``` + * ```ts * { * minifiedPublicInput1: 'publicInput1', * minifiedDeclaredInput2: [InputFlags.None, 'publicInput2', 'declaredInput2'], @@ -328,7 +328,7 @@ interface ComponentDefinition extends Omit, 'features' * * * # Example - * ``` + * ```ts * class MyComponent { * // Generated by Angular Template Compiler * // [Symbol] syntax will not be supported by TypeScript until v2.7 @@ -453,7 +453,7 @@ export function ɵɵdefineNgModule(def: { * * e.g. for * - * ``` + * ```ts * class Comp { * @Input() * propName1: string; @@ -467,7 +467,7 @@ export function ɵɵdefineNgModule(def: { * * will be serialized as * - * ``` + * ```ts * { * propName1: 'propName1', * declaredPropName2: ['publicName2', 'declaredPropName2'], @@ -477,7 +477,7 @@ export function ɵɵdefineNgModule(def: { * * which is than translated by the minifier as: * - * ``` + * ```ts * { * minifiedPropName1: 'propName1', * minifiedPropName2: ['publicName2', 'declaredPropName2'], @@ -487,7 +487,7 @@ export function ɵɵdefineNgModule(def: { * * becomes: (public name => minifiedName + isSignal if needed) * - * ``` + * ```ts * { * 'propName1': 'minifiedPropName1', * 'publicName2': 'minifiedPropName2', @@ -498,7 +498,7 @@ export function ɵɵdefineNgModule(def: { * Optionally the function can take `declaredInputs` which will result * in: (public name => declared name) * - * ``` + * ```ts * { * 'propName1': 'propName1', * 'publicName2': 'declaredPropName2', @@ -583,7 +583,7 @@ export function ɵɵdefineDirective( * Create a pipe definition object. * * # Example - * ``` + * ```ts * class MyPipe implements PipeTransform { * // Generated by Angular Template Compiler * static ɵpipe = definePipe({ diff --git a/packages/core/src/render3/di.ts b/packages/core/src/render3/di.ts index ff74a1e171b..5fc171f34c1 100644 --- a/packages/core/src/render3/di.ts +++ b/packages/core/src/render3/di.ts @@ -82,7 +82,7 @@ import {stringifyForError} from './util/stringify_utils'; * * Example: * - * ``` + * ```ts * @Injectable() * class MyService { * constructor(public value: String) {} @@ -315,19 +315,19 @@ export function diPublicInInjector( * * # Example * Given: - * ``` + * ```ts * @Component(...) * class MyComponent { * constructor(@Attribute('title') title: string) { ... } * } * ``` * When instantiated with - * ``` + * ```html * * ``` * * Then factory method generated is: - * ``` + * ```ts * MyComponent.ɵcmp = defineComponent({ * factory: () => new MyComponent(injectAttribute('title')) * ... diff --git a/packages/core/src/render3/features/ng_onchanges_feature.ts b/packages/core/src/render3/features/ng_onchanges_feature.ts index 636cd78c062..1c628fae5ee 100644 --- a/packages/core/src/render3/features/ng_onchanges_feature.ts +++ b/packages/core/src/render3/features/ng_onchanges_feature.ts @@ -26,7 +26,7 @@ import {DirectiveDef, DirectiveDefFeature} from '../interfaces/definition'; * * Example usage: * - * ``` + * ```ts * static ɵcmp = defineComponent({ * ... * inputs: {name: 'publicName'}, diff --git a/packages/core/src/render3/i18n/i18n_parse.ts b/packages/core/src/render3/i18n/i18n_parse.ts index 1f96c1aa442..713c977d2f5 100644 --- a/packages/core/src/render3/i18n/i18n_parse.ts +++ b/packages/core/src/render3/i18n/i18n_parse.ts @@ -531,7 +531,7 @@ function removeInnerTemplateTranslation(message: string): string { * translated message can span multiple templates. * * Example: - * ``` + * ```html *
          Translate me!
          * ``` * diff --git a/packages/core/src/render3/instructions/render.ts b/packages/core/src/render3/instructions/render.ts index 8604193a3a4..c4806cf5efe 100644 --- a/packages/core/src/render3/instructions/render.ts +++ b/packages/core/src/render3/instructions/render.ts @@ -48,7 +48,7 @@ export function renderComponent(hostLView: LView, componentHostIdx: number) { * will be skipped. However, consider this case of two components side-by-side: * * App template: - * ``` + * ```html * * * ``` diff --git a/packages/core/src/render3/instructions/styling.ts b/packages/core/src/render3/instructions/styling.ts index 1d7be5ffdd0..2d473468d24 100644 --- a/packages/core/src/render3/instructions/styling.ts +++ b/packages/core/src/render3/instructions/styling.ts @@ -473,7 +473,7 @@ function getTemplateHeadTStylingKey( * method allows us to update the first template instruction `TStylingKey` with a new value. * * Assume: - * ``` + * ```angular-ts *
          * * @Directive({ @@ -486,7 +486,7 @@ function getTemplateHeadTStylingKey( * ``` * * when `[style.color]="tmplExp"` executes it creates this data structure. - * ``` + * ```ts * ['', 'color', 'color', 'red', 'width', '100px'], * ``` * @@ -496,14 +496,14 @@ function getTemplateHeadTStylingKey( * `color' and 'width`) * * When `'[style.color]': 'dirExp',` executes we need to insert a new data into the linked list. - * ``` + * ```ts * ['', 'color', 'width', '100px'], // newly inserted * ['', 'color', 'color', 'red', 'width', '100px'], // this is wrong * ``` * * Notice that the template statics is now wrong as it incorrectly contains `width` so we need to * update it like so: - * ``` + * ```ts * ['', 'color', 'width', '100px'], * ['', 'color', 'color', 'red'], // UPDATE * ``` diff --git a/packages/core/src/render3/interfaces/i18n.ts b/packages/core/src/render3/interfaces/i18n.ts index 88c1f8498ca..ee29eaf4c74 100644 --- a/packages/core/src/render3/interfaces/i18n.ts +++ b/packages/core/src/render3/interfaces/i18n.ts @@ -34,7 +34,7 @@ export interface I18nRemoveOpCodes extends Array { * 3322 2222 2222 1111 1111 1110 0000 0000 * 1098 7654 3210 9876 5432 1098 7654 3210 * - * ``` + * ```ts * var parent = lView[opCode >>> SHIFT_PARENT]; * var refNode = lView[((opCode & MASK_REF) >>> SHIFT_REF)]; * var instruction = opCode & MASK_OPCODE; @@ -199,7 +199,7 @@ export interface I18nDebug { * The number is shifted and encoded according to `I18nCreateOpCode` * * Pseudocode: - * ``` + * ```ts * const i18nCreateOpCodes = [ * 10 << I18nCreateOpCode.SHIFT, "Text Node add to DOM", * 11 << I18nCreateOpCode.SHIFT | I18nCreateOpCode.COMMENT, "Comment Node add to DOM", diff --git a/packages/core/src/render3/interfaces/node.ts b/packages/core/src/render3/interfaces/node.ts index 86ff952f63f..62e94bd828a 100644 --- a/packages/core/src/render3/interfaces/node.ts +++ b/packages/core/src/render3/interfaces/node.ts @@ -853,11 +853,11 @@ export type LocalRefExtractor = (tNode: TNodeWithLocalRefs, currentView: LView) /** * Returns `true` if the `TNode` has a directive which has `@Input()` for `class` binding. * - * ``` + * ```html *
          * ``` * and - * ``` + * ```ts * @Directive({ * }) * class MyDirective { @@ -878,11 +878,11 @@ export function hasClassInput(tNode: TNode) { /** * Returns `true` if the `TNode` has a directive which has `@Input()` for `style` binding. * - * ``` + * ```html *
          * ``` * and - * ``` + * ```ts * @Directive({ * }) * class MyDirective { diff --git a/packages/core/src/render3/interfaces/styling.ts b/packages/core/src/render3/interfaces/styling.ts index 204bb434472..b0b2f93c865 100644 --- a/packages/core/src/render3/interfaces/styling.ts +++ b/packages/core/src/render3/interfaces/styling.ts @@ -44,7 +44,7 @@ export type TStylingKeyPrimitive = string | null | false; * * Imagine we have: * - * ``` + * ```angular-ts *
          * * @Directive({ @@ -57,7 +57,7 @@ export type TStylingKeyPrimitive = string | null | false; * * In the above case the linked list will contain one item: * - * ``` + * ```ts * // assume binding location: 10 for `ɵɵclassProp('dynamic', ctx.exp);` * tData[10] = [ * '': 'dynamic', // This is the wrapped value of `TStylingKey` @@ -74,13 +74,13 @@ export type TStylingKeyPrimitive = string | null | false; * `dynamic` (there is not). Therefore it is safe to remove it. * * If setting `true` case: - * ``` + * ```ts * lView[10] = true; // assume `ctx.exp` is `true` * lView[10 + 1] = true; // Just normalized `lView[10]` * ``` * So when the function is resolving styling value, it first needs to look into the linked list * (there is none) and than into `TNode.residualClass` (TNode.residualStyle) which contains - * ``` + * ```ts * tNode.residualClass = [ * 'TEMPLATE': true, * ]; diff --git a/packages/core/src/render3/interfaces/view.ts b/packages/core/src/render3/interfaces/view.ts index 7fb3437b420..d6a091fc290 100644 --- a/packages/core/src/render3/interfaces/view.ts +++ b/packages/core/src/render3/interfaces/view.ts @@ -516,7 +516,7 @@ export const enum PreOrderHookFlags { * * ## Example * - * ``` + * ```ts * const hostBindingOpCodes = [ * ~30, // Select element 30 * 40, 45, MyDir.ɵdir.hostBindings // Invoke host bindings on MyDir on element 30; @@ -527,7 +527,7 @@ export const enum PreOrderHookFlags { * ``` * * ## Pseudocode - * ``` + * ```ts * const hostBindingOpCodes = tView.hostBindingOpCodes; * if (hostBindingOpCodes === null) return; * for (let i = 0; i < hostBindingOpCodes.length; i++) { diff --git a/packages/core/src/render3/state.ts b/packages/core/src/render3/state.ts index 1e1e21269e7..32c007a29ad 100644 --- a/packages/core/src/render3/state.ts +++ b/packages/core/src/render3/state.ts @@ -277,7 +277,7 @@ export function isSkipHydrationRootTNode(tNode: TNode): boolean { * Enables directive matching on elements. * * * Example: - * ``` + * ```html * * Should match component / directive. * @@ -308,7 +308,7 @@ export function enterSkipHydrationBlock(tNode: TNode): void { * Disables directive matching on element. * * * Example: - * ``` + * ```html * * Should match component / directive. * diff --git a/packages/core/src/render3/styling/style_binding_list.ts b/packages/core/src/render3/styling/style_binding_list.ts index 87a5e9db156..74e27c14830 100644 --- a/packages/core/src/render3/styling/style_binding_list.ts +++ b/packages/core/src/render3/styling/style_binding_list.ts @@ -34,7 +34,7 @@ import {getTView} from '../state'; * instructions can be traversed in priority order when computing the styles. * * Assume we are dealing with the following code: - * ``` + * ```angular-ts * @Component({ * template: ` * = 0; i = parseClassNameNext(text, i)) { * const key = getLastParsedKey(); * ... @@ -87,7 +87,7 @@ export function parseClassName(text: string): number { * Parses next `className` token. * * This function is intended to be used in this format: - * ``` + * ```ts * for (let i = parseClassName(text); i >= 0; i = parseClassNameNext(text, i)) { * const key = getLastParsedKey(); * ... @@ -111,7 +111,7 @@ export function parseClassNameNext(text: string, index: number): number { * Initializes `cssText` string for parsing and parses the first key/values. * * This function is intended to be used in this format: - * ``` + * ```ts * for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i))) { * const key = getLastParsedKey(); * const value = getLastParsedValue(); @@ -130,7 +130,7 @@ export function parseStyle(text: string): number { * Parses the next `cssText` key/values. * * This function is intended to be used in this format: - * ``` + * ```ts * for (let i = parseStyle(text); i >= 0; i = parseStyleNext(text, i))) { * const key = getLastParsedKey(); * const value = getLastParsedValue(); diff --git a/packages/core/src/render3/view_ref.ts b/packages/core/src/render3/view_ref.ts index 11f42cb7d7b..ba400065625 100644 --- a/packages/core/src/render3/view_ref.ts +++ b/packages/core/src/render3/view_ref.ts @@ -159,7 +159,7 @@ export class ViewRef implements EmbeddedViewRef, ChangeDetectorRefInterfac * @usageNotes * ### Example * - * ```typescript + * ```ts * @Component({ * selector: 'app-root', * template: `Number of ticks: {{numberOfTicks}}` @@ -205,7 +205,7 @@ export class ViewRef implements EmbeddedViewRef, ChangeDetectorRefInterfac * we want to check and update the list every five seconds. We can do that by detaching * the component's change detector and doing a local check every five seconds. * - * ```typescript + * ```ts * class DataProvider { * // in a real application the returned data will be different every time * get data() { @@ -258,7 +258,7 @@ export class ViewRef implements EmbeddedViewRef, ChangeDetectorRefInterfac * its change detector from the main change detector tree when the component's live property * is set to false. * - * ```typescript + * ```ts * class DataProvider { * data = 1; * diff --git a/packages/core/src/testability/testability.ts b/packages/core/src/testability/testability.ts index 89abee7e4d9..072a88fd1dc 100644 --- a/packages/core/src/testability/testability.ts +++ b/packages/core/src/testability/testability.ts @@ -71,7 +71,7 @@ export const TESTABILITY_GETTER = new InjectionToken(''); * providers using the `provideProtractorTestingSupport()` function and adding them into the * `options.providers` array. Example: * - * ```typescript + * ```ts * import {provideProtractorTestingSupport} from '@angular/platform-browser'; * * await bootstrapApplication(RootComponent, providers: [provideProtractorTestingSupport()]); diff --git a/packages/core/src/transfer_state.ts b/packages/core/src/transfer_state.ts index 5d87347cedf..f92d9da5375 100644 --- a/packages/core/src/transfer_state.ts +++ b/packages/core/src/transfer_state.ts @@ -16,7 +16,7 @@ import {getDocument} from './render3/interfaces/document'; * * Example: * - * ``` + * ```ts * const COUNTER_KEY = makeStateKey('counter'); * let value = 10; * @@ -35,7 +35,7 @@ export type StateKey = string & { * * Example: * - * ``` + * ```ts * const COUNTER_KEY = makeStateKey('counter'); * let value = 10; * diff --git a/packages/core/src/util/coercion.ts b/packages/core/src/util/coercion.ts index 87c05275053..ce2c783c05c 100644 --- a/packages/core/src/util/coercion.ts +++ b/packages/core/src/util/coercion.ts @@ -11,7 +11,7 @@ * Intended to be used as a transform function of an input. * * @usageNotes - * ```typescript + * ```ts * @Input({ transform: booleanAttribute }) status!: boolean; * ``` * @param value Value to be transformed. @@ -29,7 +29,7 @@ export function booleanAttribute(value: unknown): boolean { * @param fallbackValue Value to use if the provided value can't be parsed as a number. * * @usageNotes - * ```typescript + * ```ts * @Input({ transform: numberAttribute }) id!: number; * ``` * diff --git a/packages/core/src/util/decorators.ts b/packages/core/src/util/decorators.ts index 6e0e26ad954..a0b09fa1e20 100644 --- a/packages/core/src/util/decorators.ts +++ b/packages/core/src/util/decorators.ts @@ -14,7 +14,7 @@ import {noSideEffects} from './closure'; * An interface implemented by all Angular type decorators, which allows them to be used as * decorators as well as Angular syntax. * - * ``` + * ```ts * @ng.Component({...}) * class MyClass {...} * ``` diff --git a/packages/core/src/util/dom.ts b/packages/core/src/util/dom.ts index f227b82adf5..a7ab6e3add4 100644 --- a/packages/core/src/util/dom.ts +++ b/packages/core/src/util/dom.ts @@ -28,7 +28,7 @@ const COMMENT_DELIMITER_ESCAPED = '\u200B$1\u200B'; * * see: https://html.spec.whatwg.org/multipage/syntax.html#comments * - * ``` + * ```ts * div.innerHTML = div.innerHTML * ``` * diff --git a/packages/core/src/zone/ng_zone.ts b/packages/core/src/zone/ng_zone.ts index 8ab62c825dd..536cea1fefd 100644 --- a/packages/core/src/zone/ng_zone.ts +++ b/packages/core/src/zone/ng_zone.ts @@ -39,7 +39,7 @@ let ngZoneInstanceId = 0; * @usageNotes * ### Example * - * ``` + * ```ts * import {Component, NgZone} from '@angular/core'; * import {NgIf} from '@angular/common'; * diff --git a/packages/core/test/render3/instructions/shared_spec.ts b/packages/core/test/render3/instructions/shared_spec.ts index 0ec6814e6aa..fcc7c4af682 100644 --- a/packages/core/test/render3/instructions/shared_spec.ts +++ b/packages/core/test/render3/instructions/shared_spec.ts @@ -27,7 +27,7 @@ import {MockRendererFactory} from './mock_renderer_factory'; /** * Setups a simple `LView` so that it is possible to do unit tests on instructions. * - * ``` + * ```ts * describe('styling', () => { * beforeEach(enterViewWithOneDiv); * afterEach(leaveView); diff --git a/packages/core/test/render3/is_shape_of.ts b/packages/core/test/render3/is_shape_of.ts index ff9a59940bc..c3044967104 100644 --- a/packages/core/test/render3/is_shape_of.ts +++ b/packages/core/test/render3/is_shape_of.ts @@ -18,7 +18,7 @@ import {TView} from '@angular/core/src/render3/interfaces/view'; * This is later used by `isShapeOf` method to ensure that a particular object has a particular * shape. * - * ``` + * ```ts * interface MyShape { * foo: string, * bar: number @@ -34,7 +34,7 @@ import {TView} from '@angular/core/src/render3/interfaces/view'; * `MyShape` is refactored to change a set of properties we would like to have a compile time error * that the `ExpectedPropertiesOfShape` also needs to be changed. * - * ``` + * ```ts * const ExpectedPropertiesOfShape = >{foo: true, bar: true}; * ``` * The above code will force through compile time checks that the `ExpectedPropertiesOfShape` match @@ -50,7 +50,7 @@ export type ShapeOf = { /** * Determines if a particular object is of a given shape (duck-type version of `instanceof`.) * - * ``` + * ```ts * isShapeOf(someObj, {foo: true, bar: true}); * ``` * diff --git a/packages/core/test/render3/matchers.ts b/packages/core/test/render3/matchers.ts index 1d46f601aa2..ad5f093d5d5 100644 --- a/packages/core/test/render3/matchers.ts +++ b/packages/core/test/render3/matchers.ts @@ -59,7 +59,7 @@ export function matchObjectShape( * Asymmetric matcher which matches a `TView` of a given shape. * * Expected usage: - * ``` + * ```ts * expect(tNode).toEqual(matchTView({type: TViewType.Root})); * expect({ * node: tNode @@ -78,7 +78,7 @@ export function matchTView(expected?: Partial): jasmine.AsymmetricMatcher * Asymmetric matcher which matches a `TNode` of a given shape. * * Expected usage: - * ``` + * ```ts * expect(tNode).toEqual(matchTNode({type: TNodeType.Element})); * expect({ * node: tNode @@ -97,7 +97,7 @@ export function matchTNode(expected?: Partial): jasmine.AsymmetricMatcher * Asymmetric matcher which matches a `T18n` of a given shape. * * Expected usage: - * ``` + * ```ts * expect(tNode).toEqual(matchT18n({vars: 0})); * expect({ * node: tNode @@ -116,7 +116,7 @@ export function matchTI18n(expected?: Partial): jasmine.AsymmetricMatcher * Asymmetric matcher which matches a `T1cu` of a given shape. * * Expected usage: - * ``` + * ```ts * expect(tNode).toEqual(matchTIcu({type: TIcuType.select})); * expect({ * type: TIcuType.select @@ -135,7 +135,7 @@ export function matchTIcu(expected?: Partial): jasmine.AsymmetricMatcher { * object.doSomething.then(() => { * expect(...); diff --git a/packages/core/testing/src/fake_async.ts b/packages/core/testing/src/fake_async.ts index 3a7eb162bae..6e0b621ddf4 100644 --- a/packages/core/testing/src/fake_async.ts +++ b/packages/core/testing/src/fake_async.ts @@ -91,7 +91,7 @@ export function fakeAsync(fn: Function, options?: {flush?: boolean}): (...args: * `processNewMacroTasksSynchronously` defaults to true, and the nested * function is executed on each tick. * - * ``` + * ```ts * it ('test with nested setTimeout', fakeAsync(() => { * let nestedTimeoutInvoked = false; * function funcWithNestedTimeout() { @@ -108,7 +108,7 @@ export function fakeAsync(fn: Function, options?: {flush?: boolean}): (...args: * In the following case, `processNewMacroTasksSynchronously` is explicitly * set to false, so the nested timeout function is not invoked. * - * ``` + * ```ts * it ('test with nested setTimeout', fakeAsync(() => { * let nestedTimeoutInvoked = false; * function funcWithNestedTimeout() { diff --git a/packages/core/testing/src/test_bed.ts b/packages/core/testing/src/test_bed.ts index 7cc43ffa0c0..89a77fb976e 100644 --- a/packages/core/testing/src/test_bed.ts +++ b/packages/core/testing/src/test_bed.ts @@ -880,7 +880,7 @@ export const TestBed: TestBedStatic = TestBedImpl; * * Example: * - * ``` + * ```ts * beforeEach(inject([Dependency, AClass], (dep, object) => { * // some code that uses `dep` and `object` * // ... diff --git a/packages/forms/src/directives/checkbox_value_accessor.ts b/packages/forms/src/directives/checkbox_value_accessor.ts index 4a03afe5d18..922d2b38da8 100644 --- a/packages/forms/src/directives/checkbox_value_accessor.ts +++ b/packages/forms/src/directives/checkbox_value_accessor.ts @@ -35,7 +35,7 @@ const CHECKBOX_VALUE_ACCESSOR: Provider = { * const rememberLoginControl = new FormControl(); * ``` * - * ``` + * ```html * * ``` * diff --git a/packages/forms/src/directives/default_value_accessor.ts b/packages/forms/src/directives/default_value_accessor.ts index d5be9596a6f..24f94943880 100644 --- a/packages/forms/src/directives/default_value_accessor.ts +++ b/packages/forms/src/directives/default_value_accessor.ts @@ -66,7 +66,7 @@ export const COMPOSITION_BUFFER_MODE = new InjectionToken( * const firstNameControl = new FormControl(); * ``` * - * ``` + * ```html * * ``` * @@ -75,7 +75,7 @@ export const COMPOSITION_BUFFER_MODE = new InjectionToken( * processing. In order to attach the default value accessor to a custom element, add the * `ngDefaultControl` attribute as shown below. * - * ``` + * ```html * * ``` * diff --git a/packages/forms/src/directives/ng_model.ts b/packages/forms/src/directives/ng_model.ts index 7881f4c2f25..1140157d917 100644 --- a/packages/forms/src/directives/ng_model.ts +++ b/packages/forms/src/directives/ng_model.ts @@ -57,7 +57,7 @@ const formControlBinding: Provider = { /** * `ngModel` forces an additional change detection run when its inputs change: * E.g.: - * ``` + * ```html *
          {{myModel.valid}}
          * * ``` diff --git a/packages/forms/src/directives/ng_no_validate_directive.ts b/packages/forms/src/directives/ng_no_validate_directive.ts index a0b8e270abb..12855ce88c7 100644 --- a/packages/forms/src/directives/ng_no_validate_directive.ts +++ b/packages/forms/src/directives/ng_no_validate_directive.ts @@ -17,7 +17,7 @@ import {Directive} from '@angular/core'; * * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute: * - * ``` + * ```html *
          * ``` * diff --git a/packages/forms/src/directives/number_value_accessor.ts b/packages/forms/src/directives/number_value_accessor.ts index ceb3c078dbd..2c762771457 100644 --- a/packages/forms/src/directives/number_value_accessor.ts +++ b/packages/forms/src/directives/number_value_accessor.ts @@ -36,7 +36,7 @@ const NUMBER_VALUE_ACCESSOR: Provider = { * const totalCountControl = new FormControl(); * ``` * - * ``` + * ```html * * ``` * diff --git a/packages/forms/src/directives/range_value_accessor.ts b/packages/forms/src/directives/range_value_accessor.ts index 0bfaa05fcf4..e88a927eb7b 100644 --- a/packages/forms/src/directives/range_value_accessor.ts +++ b/packages/forms/src/directives/range_value_accessor.ts @@ -36,7 +36,7 @@ const RANGE_VALUE_ACCESSOR: Provider = { * const ageControl = new FormControl(); * ``` * - * ``` + * ```html * * ``` * diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts index 91a830c3c19..0a5a309d8c3 100644 --- a/packages/forms/src/directives/select_control_value_accessor.ts +++ b/packages/forms/src/directives/select_control_value_accessor.ts @@ -79,7 +79,7 @@ function _extractId(valueString: string): string { * const selectedCountriesControl = new FormControl(); * ``` * - * ``` + * ```html * *