From 1b38b413dec6ba3559c97c105e8edcd88cef6081 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:46 +0200 Subject: [PATCH] docs: fix indentation of code snippets in the "Cheat sheet" guide (#41051) Previously, the indentation of code snippets in the "Cheat sheet" guide was done using regular spaces. However, leading whitespace is ignored in HTML elements (by default), which resulted in the identation being lost. This commit fixes this by using the ` ` HTML entity for indentation, ensuring the code snippets are easier to read. Some examples: Before: ![cheatsheet code indentation before][1] After: ![cheatsheet code since PR 40944][2] [1]: https://user-images.githubusercontent.com/8604205/109385242-218dd600-78fb-11eb-9261-18ab5f2c308c.png [2]: https://user-images.githubusercontent.com/8604205/109385246-25b9f380-78fb-11eb-8e82-d8a561deba21.png PR Close #41051 --- aio/content/guide/cheatsheet.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md index b0c26ec07d..b289a5783c 100644 --- a/aio/content/guide/cheatsheet.md +++ b/aio/content/guide/cheatsheet.md @@ -22,7 +22,7 @@ -@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {} +@NgModule({
 declarations: ..., imports: ..., exports: ...,
 providers: ..., bootstrap: ...
})
class MyModule {}

Defines a module that contains components, directives, pipes, and providers.

@@ -91,7 +91,7 @@ is available to declarations of this module.

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

-<video #movieplayer ...>
<button (click)="movieplayer.play()">
</video> +<video #movieplayer ...></video>
<button (click)="movieplayer.play()">Play</button>

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

@@ -112,7 +112,7 @@ is available to declarations of this module.

An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.

-<svg>
<rect x="0" y="0" width="100" height="100"/>
</svg> +<svg>
 <rect x="0" y="0" width="100" height="100"/>
</svg>

An <svg> root element is detected as an SVG element automatically, without the prefix.

@@ -134,7 +134,7 @@ is available to declarations of this module.

Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

-<div [ngSwitch]="conditionExpression">
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
<ng-template ngSwitchDefault>...</ng-template>
</div> +<div [ngSwitch]="conditionExpression">
 <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
 <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
 <ng-template ngSwitchDefault>...</ng-template>
</div>

Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

@@ -353,7 +353,7 @@ so the @Directive configuration applies to components as well

-const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'path/:routeParam', component: MyComponent },
{ path: 'staticPath', component: ... },
{ path: '**', component: ... },
{ path: 'oldPath', redirectTo: '/staticPath' },
{ path: ..., component: ..., data: { message: 'Custom' } }
]);

const routing = RouterModule.forRoot(routes); +const routes: Routes = [
 { path: '', component: HomeComponent },
 { path: 'path/:routeParam', component: MyComponent },
 { path: 'staticPath', component: ... },
 { path: '**', component: ... },
 { path: 'oldPath', redirectTo: '/staticPath' },
 { path: ..., component: ..., data: { message: 'Custom' } }
]);

const routing = RouterModule.forRoot(routes);

Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.

@@ -361,31 +361,31 @@ so the @Directive configuration applies to components as well

Marks the location to load the component of the active route.

-
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">
 +
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">

Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.

-<a [routerLink]="[ '/path' ]" routerLinkActive="active"> +<a [routerLink]="[ '/path' ]" routerLinkActive="active">

The provided classes are added to the element when the routerLink becomes the current active route.

-class CanActivateGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivate: [CanActivateGuard] } +class CanActivateGuard implements CanActivate {
 canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivate: [CanActivateGuard] }

An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

-class CanDeactivateGuard implements CanDeactivate<T> {
canDeactivate(
component: T,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canDeactivate: [CanDeactivateGuard] } +class CanDeactivateGuard implements CanDeactivate<T> {
 canDeactivate(
  component: T,
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canDeactivate: [CanDeactivateGuard] }

An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

-class CanActivateChildGuard implements CanActivateChild {
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivateChild: [CanActivateGuard],
children: ... } +class CanActivateChildGuard implements CanActivateChild {
 canActivateChild(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivateChild: [CanActivateGuard],
 children: ... }

An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

-class ResolveGuard implements Resolve<T> {
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any>|Promise<any>|any { ... }
}

{ path: ..., resolve: [ResolveGuard] } +class ResolveGuard implements Resolve<T> {
 resolve(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<any>|Promise<any>|any { ... }
}

{ path: ..., resolve: [ResolveGuard] }

An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.

-class CanLoadGuard implements CanLoad {
canLoad(
route: Route
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... } +class CanLoadGuard implements CanLoad {
 canLoad(
  route: Route
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }

An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.