+ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
++ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
++ Building for the web is fantastic! +
++ The new template syntax is great +
++ I agree with the other comments! +
+ `, + styles: [ + ` + .comment { + padding: 15px; + margin-left: 30px; + background-color: paleturquoise; + border-radius: 20px; + } + `, + ], + standalone: true, +}) +export class ArticleCommentsComponent {} diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/main.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/main.ts new file mode 100644 index 00000000000..bf030b9489d --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/main.ts @@ -0,0 +1,5 @@ +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json new file mode 100644 index 00000000000..164da544038 --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json @@ -0,0 +1,5 @@ +{ + "openFiles": ["src/app/app.component.ts", "src/app/article-comments.component.ts"], + "title": "What are deferrable views", + "type": "editor" +} diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.component.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.component.ts new file mode 100644 index 00000000000..1e17558bd4a --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.component.ts @@ -0,0 +1,26 @@ +import {Component} from '@angular/core'; +import {ArticleCommentsComponent} from './article-comments.component'; + +@Component({ + selector: 'app-root', + template: ` ++ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
++ Building for the web is fantastic! +
++ The new template syntax is great +
++ I agree with the other comments! +
+ `, + styles: [ + ` + .comment { + padding: 15px; + margin-left: 30px; + background-color: paleturquoise; + border-radius: 20px; + } + `, + ], + standalone: true, +}) +export class ArticleCommentsComponent {} diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/main.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/main.ts new file mode 100644 index 00000000000..bf030b9489d --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/main.ts @@ -0,0 +1,5 @@ +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md new file mode 100644 index 00000000000..d9eb46829ee --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md @@ -0,0 +1,106 @@ +# @loading, @error and @placeholder blocks + +Deferrable views let you define content to be shown in different loading states. + +@placeholder |
+
+ By default, defer blocks do not render any content before they are triggered. The @placeholder is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
+
+ Learn more in the full deferrable views documentation
+
+ |
+
@loading |
+ + This optional block allows you to declare content to be shown during the loading of any deferred dependencies. + | +
@error |
+ + This block allows you to declare content which is shown if deferred loading fails. + | +
Placeholder for comments
+} +Placeholder for comments
+} +Placeholder for comments
+} @loading (minimum 1s; after 500ms) { +Loading comments...
+} +Placeholder for comments
+} @loading (minimum 1s; after 500ms) { +Loading comments...
+} @error { +Failed to load comments
+} ++ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
+Placeholder for comments
+ } @loading (minimum 1s; after 500ms) { +Loading comments...
+ } @error { +Failed to load comments
+ } + ++ Building for the web is fantastic! +
++ The new template syntax is great +
++ I agree with the other comments! +
+ `, + styles: [ + ` + .comment { + padding: 15px; + margin-left: 30px; + background-color: paleturquoise; + border-radius: 20px; + } + `, + ], + standalone: true, +}) +export class ArticleCommentsComponent {} diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/main.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/main.ts new file mode 100644 index 00000000000..bf030b9489d --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/main.ts @@ -0,0 +1,5 @@ +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json new file mode 100644 index 00000000000..58ccf17a4c5 --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json @@ -0,0 +1,5 @@ +{ + "openFiles": ["src/app/app.component.ts", "src/app/article-comments.component.ts"], + "title": "@loading, @error and @placeholder blocks", + "type": "editor" +} diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.component.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.component.ts new file mode 100644 index 00000000000..5c3d91f4ff3 --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.component.ts @@ -0,0 +1,28 @@ +import {Component} from '@angular/core'; +import {ArticleCommentsComponent} from './article-comments.component'; + +@Component({ + selector: 'app-root', + template: ` ++ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
++ Building for the web is fantastic! +
++ The new template syntax is great +
++ I agree with the other comments! +
+ `, + styles: [ + ` + .comment { + padding: 15px; + margin-left: 30px; + background-color: paleturquoise; + border-radius: 20px; + } + `, + ], + standalone: true, +}) +export class ArticleCommentsComponent {} diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/main.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/main.ts new file mode 100644 index 00000000000..bf030b9489d --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/main.ts @@ -0,0 +1,5 @@ +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md new file mode 100644 index 00000000000..379e00ffa89 --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md @@ -0,0 +1,106 @@ +# Defer triggers + +While the default options for `@defer` offer great options for lazy loading parts of your components it may still be desirable to further customize the deferred loading experience. + +By default, deferred content loads when the browser is idle. You can, however, customize when this loading occurs by specifying a **trigger**. This lets you pick the loading behavior best suited to your component. + +Deferrable views offer two types of loading trigger: + +on |
+
+ A trigger condition using a trigger from the list of built-in triggers. + For example: @defer (on viewport)
+ |
+
when |
+
+ A condition as an expression which is evaluated for truthiness. When the expression is truthy, the placeholder is swapped with the lazily loaded content. + For example: @defer (when customizedCondition)
+ |
+
Placeholder for comments
+} @loading (minimum 1s; after 500ms) { +Loading comments...
+} @error { +Failed to load comments
+} +Placeholder for comments
+} @loading (minimum 1s; after 500ms) { +Loading comments...
+} @error { +Failed to load comments
+} +Placeholder for comments
+} @loading (minimum 1s; after 500ms) { +Loading comments...
+} @error { +Failed to load comments
+} ++ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
+Placeholder for comments
+ } @loading (minimum 1s; after 500ms) { +Loading comments...
+ } @error { +Failed to load comments
+ } + ++ Building for the web is fantastic! +
++ The new template syntax is great +
++ I agree with the other comments! +
+ `, + styles: [ + ` + .comment { + padding: 15px; + margin-left: 30px; + background-color: paleturquoise; + border-radius: 20px; + } + `, + ], + standalone: true, +}) +export class ArticleCommentsComponent {} diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/main.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/main.ts new file mode 100644 index 00000000000..bf030b9489d --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/main.ts @@ -0,0 +1,5 @@ +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json new file mode 100644 index 00000000000..0151d3e72e2 --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json @@ -0,0 +1,5 @@ +{ + "openFiles": ["src/app/app.component.ts", "src/app/article-comments.component.ts"], + "title": "Defer triggers", + "type": "editor" +} diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.component.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.component.ts new file mode 100644 index 00000000000..8e82906e1de --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.component.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; +import {ArticleCommentsComponent} from './article-comments.component'; + +@Component({ + selector: 'app-root', + template: ` ++ Angular is my favorite framework, and + this is why. Angular has the coolest + deferrable view feature that makes defer + loading content the easiest and most + ergonomic it could possibly be. +
+Placeholder for comments
+ } @loading (minimum 1s; after 500ms) { +Loading comments...
+ } @error { +Failed to load comments
+ } + ++ Building for the web is fantastic! +
++ The new template syntax is great +
++ I agree with the other comments! +
+ `, + styles: [ + ` + .comment { + padding: 15px; + margin-left: 30px; + background-color: paleturquoise; + border-radius: 20px; + } + `, + ], + standalone: true, +}) +export class ArticleCommentsComponent {} diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/main.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/main.ts new file mode 100644 index 00000000000..bf030b9489d --- /dev/null +++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/main.ts @@ -0,0 +1,5 @@ +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; + +bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)); diff --git a/adev/src/content/tutorials/home.md b/adev/src/content/tutorials/home.md index dfcaaf5a491..0b4c2b25018 100644 --- a/adev/src/content/tutorials/home.md +++ b/adev/src/content/tutorials/home.md @@ -9,4 +9,7 @@ Welcome to the Angular tutorials! These tutorials will guide you through the cor