mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: update examples to use self-closing tags for consistency with recommended practices
Updated various template examples to use self-closing component tags
(e.g., `<my-comp />`) instead of the expanded form (`<my-comp></my-comp>`),
improving consistency across the documentation and aligning with current
Angular style recommendations.
(cherry picked from commit a464406ebf)
This commit is contained in:
Shuaib Hasan Akib
Pawel Kozlowski
parent
ce961fe5c0
commit
74cbe36fa6
15 changed files with 22 additions and 22 deletions
|
|
@ -331,7 +331,7 @@ Components are used in your templates, as in the following example:
|
|||
|
||||
```html
|
||||
<app-root>
|
||||
<app-child></app-child>;
|
||||
<app-child />;
|
||||
</app-root>
|
||||
```
|
||||
|
||||
|
|
@ -673,11 +673,11 @@ Next, add the following to `child.component.html`:
|
|||
|
||||
<div class="container">
|
||||
<h3>Content projection</h3>
|
||||
<ng-content></ng-content>
|
||||
<ng-content />
|
||||
</div>
|
||||
<h3>Inside the view</h3>
|
||||
|
||||
<app-inspector></app-inspector>
|
||||
<app-inspector />
|
||||
```
|
||||
|
||||
`<ng-content>` allows you to project content, and `<app-inspector>` inside the `ChildComponent` template makes the `InspectorComponent` a child component of `ChildComponent`.
|
||||
|
|
@ -686,7 +686,7 @@ Next, add the following to `app.component.html` to take advantage of content pro
|
|||
|
||||
```html
|
||||
<app-child>
|
||||
<app-inspector></app-inspector>
|
||||
<app-inspector />
|
||||
</app-child>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class LibCardComponent {
|
|||
}
|
||||
```
|
||||
|
||||
Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card></lib-card>`.
|
||||
Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card />`.
|
||||
In this case, `<lib-header>` is not used and you would expect it to be tree-shaken, but that is not what happens.
|
||||
This is because `LibCardComponent` actually contains two references to the `LibHeaderComponent`:
|
||||
|
||||
|
|
|
|||
|
|
@ -69,10 +69,10 @@ When displaying a route, the `<router-outlet>` element remains present in the DO
|
|||
|
||||
```angular-html
|
||||
<!-- Content rendered on the page when the user visits /admin -->
|
||||
<app-header>...</app-header>
|
||||
<router-outlet></router-outlet>
|
||||
<app-admin-page>...</app-admin-page>
|
||||
<app-footer>...</app-footer>
|
||||
<app-header />
|
||||
<router-outlet />
|
||||
<app-admin-page />
|
||||
<app-footer />
|
||||
```
|
||||
|
||||
## Nesting routes with child routes
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ You can also apply structural directives to `<ng-container>` elements. Common ex
|
|||
```angular-html
|
||||
<ng-container *ngIf="permissions == 'admin'">
|
||||
<h1>Admin Dashboard</h1>
|
||||
<admin-infographic></admin-infographic>
|
||||
<admin-infographic />
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngFor="let item of items; index as i; trackBy: trackByFn">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {Home} from './home/home';
|
|||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
|
||||
</header>
|
||||
<section class="content">
|
||||
<app-home></app-home>
|
||||
<app-home />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ In this lesson, you will enable routing in your application to navigate to the d
|
|||
2. Add `RouterOutlet` and `RouterLink` to the `@Component` metadata imports
|
||||
|
||||
<docs-code language="angular-ts" header="Add router directives to component imports in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/>
|
||||
3. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code:
|
||||
3. In the `template` property, replace the `<app-home />` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code:
|
||||
|
||||
<docs-code language="angular-ts" header="Add router-outlet in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {RouterLink, RouterOutlet} from '@angular/router';
|
|||
</header>
|
||||
</a>
|
||||
<section class="content">
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet />
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ import {CartDisplay} from './cart-display';
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<cart-display></cart-display>
|
||||
<cart-display />
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ import {CartDisplay} from './cart-display';
|
|||
Cart: {{ cartStore.totalQuantity() }} items (\${{ cartStore.totalPrice() }})
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<cart-display></cart-display>
|
||||
<cart-display />
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
Loading…
Reference in a new issue