Skip to content

Commit 6287c9e

Browse files
MeAkibMeAkib
committed
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.
1 parent 400fc82 commit 6287c9e

30 files changed

Lines changed: 247 additions & 202 deletions

File tree

‎adev/src/content/guide/di/hierarchical-dependency-injection.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ Components are used in your templates, as in the following example:
331331

332332
```html
333333
<app-root>
334-
<app-child></app-child>;
334+
<app-child />;
335335
</app-root>
336336
```
337337

@@ -673,11 +673,11 @@ Next, add the following to `child.component.html`:
673673

674674
<div class="container">
675675
<h3>Content projection</h3>
676-
<ng-content></ng-content>
676+
<ng-content />
677677
</div>
678678
<h3>Inside the view</h3>
679679

680-
<app-inspector></app-inspector>
680+
<app-inspector />
681681
```
682682

683683
`<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
686686

687687
```html
688688
<app-child>
689-
<app-inspector></app-inspector>
689+
<app-inspector />
690690
</app-child>
691691
```
692692

‎adev/src/content/guide/di/lightweight-injection-tokens.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ class LibCardComponent {
4949
}
5050
```
5151

52-
Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card></lib-card>`.
52+
Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card />`.
5353
In this case, `<lib-header>` is not used and you would expect it to be tree-shaken, but that is not what happens.
5454
This is because `LibCardComponent` actually contains two references to the `LibHeaderComponent`:
5555

‎adev/src/content/guide/routing/show-routes-with-outlets.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ When displaying a route, the `<router-outlet>` element remains present in the DO
6969

7070
```angular-html
7171
<!-- Content rendered on the page when the user visits /admin -->
72-
<app-header>...</app-header>
73-
<router-outlet></router-outlet>
74-
<app-admin-page>...</app-admin-page>
75-
<app-footer>...</app-footer>
72+
<app-header />
73+
<router-outlet />
74+
<app-admin-page />
75+
<app-footer />
7676
```
7777

7878
## Nesting routes with child routes

‎adev/src/content/guide/templates/ng-container.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ You can also apply structural directives to `<ng-container>` elements. Common ex
8080
```angular-html
8181
<ng-container *ngIf="permissions == 'admin'">
8282
<h1>Admin Dashboard</h1>
83-
<admin-infographic></admin-infographic>
83+
<admin-infographic />
8484
</ng-container>
8585
8686
<ng-container *ngFor="let item of items; index as i; trackBy: trackByFn">

‎adev/src/content/tutorials/first-app/steps/01-hello-world/src/index.html‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Default</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
10-
</head>
11-
<body>
12-
<app-root></app-root>
13-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Default</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
</head>
14+
<body>
15+
<app-root />
16+
</body>
1417
</html>

‎adev/src/content/tutorials/first-app/steps/02-Home/src/index.html‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Homes</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
10-
</head>
11-
<body>
12-
<app-root></app-root>
13-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Homes</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
</head>
14+
<body>
15+
<app-root />
16+
</body>
1417
</html>

‎adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {Home} from './home/home';
1010
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
1111
</header>
1212
<section class="content">
13-
<app-home></app-home>
13+
<app-home />
1414
</section>
1515
</main>
1616
`,

‎adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/index.html‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Homes</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
10-
</head>
11-
<body>
12-
<app-root></app-root>
13-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Homes</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
</head>
14+
<body>
15+
<app-root />
16+
</body>
1417
</html>

‎adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/app.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {Home} from './home/home';
1010
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
1111
</header>
1212
<section class="content">
13-
<app-home></app-home>
13+
<app-home />
1414
</section>
1515
</main>
1616
`,

‎adev/src/content/tutorials/first-app/steps/04-interfaces/src/index.html‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Homes</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
10-
</head>
11-
<body>
12-
<app-root></app-root>
13-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Homes</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
</head>
14+
<body>
15+
<app-root />
16+
</body>
1417
</html>

0 commit comments

Comments
 (0)