c472c5b872
Content projection is an important part of Angular. However, it has never been documented in the Angular documentation set. This topic attempts to provide the basics of content projection for developers. It is not a comprehensive guide; rather, it is a starting point that we can hopefully expand upon in the future. PR Close #41143
483 lines
13 KiB
Markdown
483 lines
13 KiB
Markdown
# Example applications
|
|
|
|
The following is a list of the example applications in the [Angular documentation](docs).
|
|
|
|
## Fundamentals
|
|
|
|
These examples demonstrate minimal, fundamental concepts.
|
|
|
|
### Getting started application
|
|
|
|
<live-example name="getting-started"></live-example>
|
|
|
|
Introductory application demonstrating Angular features.
|
|
For more information, see [Getting started](start).
|
|
|
|
|
|
### Launching your app
|
|
|
|
<live-example name="bootstrapping"></live-example>
|
|
|
|
Demonstrates the Angular bootstrapping process.
|
|
For more information, see [Launching your app with a root module](guide/bootstrapping).
|
|
|
|
### Structure of Angular applications
|
|
|
|
<live-example name="architecture"></live-example>
|
|
|
|
Demonstrates the fundamental architecture of Angular applications.
|
|
For more information, see [Introduction to Angular concepts](guide/architecture).
|
|
|
|
### Setting the document title
|
|
|
|
<live-example name="set-document-title"></live-example>
|
|
|
|
Demonstrates customizing the document title in the browser.
|
|
For more information, see [Set the document title](guide/set-document-title).
|
|
|
|
|
|
## Tour of Heroes tutorial application
|
|
|
|
The Tour of Heroes is a comprehensive tutorial that guides you through the process of building an application with many of Angular's most popular features.
|
|
|
|
### Tour of Heroes: completed application
|
|
|
|
<live-example name="toh-pt6"></live-example>
|
|
|
|
Completed Tour of Heroes example application.
|
|
For more information, see [Tour of Heroes app and tutorial](tutorial).
|
|
|
|
### Tour of Heroes: Creating an application
|
|
|
|
<live-example name="toh-pt0"></live-example>
|
|
|
|
Initial Tour of Heroes example application for beginning the tutorial.
|
|
For more information, see [Create a new project](tutorial/toh-pt0).
|
|
|
|
### Tour of Heroes: The hero editor
|
|
|
|
<live-example name="toh-pt1"></live-example>
|
|
|
|
First step of the Tour of Heroes example application.
|
|
For more information, see [The hero editor](tutorial/toh-pt1).
|
|
|
|
### Tour of Heroes: Display a selection list
|
|
|
|
<live-example name="toh-pt2"></live-example>
|
|
|
|
Second step of the Tour of Heroes example application.
|
|
For more information, see [Display a selection list](tutorial/toh-pt2).
|
|
|
|
### Tour of Heroes: Create a feature component
|
|
|
|
<live-example name="toh-pt3"></live-example>
|
|
|
|
Third step of the Tour of Heroes example application.
|
|
For more information, see [Create a feature component](tutorial/toh-pt3).
|
|
|
|
### Tour of Heroes: Add services
|
|
|
|
<live-example name="toh-pt4"></live-example>
|
|
|
|
Fourth step of the Tour of Heroes example application.
|
|
For more information, see [Add services](tutorial/toh-pt4).
|
|
|
|
### Tour of Heroes: Add in-app navigation with routing
|
|
|
|
<live-example name="toh-pt5"></live-example>
|
|
|
|
Fifth step of the Tour of Heroes example application.
|
|
For more information, see [Add in-app navigation with routing](tutorial/toh-pt5).
|
|
|
|
### Tour of Heroes: Get data from a server
|
|
|
|
<live-example name="toh-pt6"></live-example>
|
|
|
|
Sixth and final step of the Tour of Heroes example application.
|
|
For more information, see [Get data from a server](tutorial/toh-pt6).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Working with templates
|
|
|
|
These examples demonstrate features of Angular templates.
|
|
|
|
### Accessibility
|
|
|
|
<live-example name="accessibility"></live-example>
|
|
|
|
Demonstrates building Angular applications in a more accessible way.
|
|
For more information, see [Accessibility](guide/accessibility).
|
|
|
|
### Animations
|
|
|
|
<live-example name="animations"></live-example>
|
|
|
|
Demonstrates Angular's animation features.
|
|
For more information, see [Introduction to Angular animations](guide/animations).
|
|
|
|
### Attribute, class, and style bindings
|
|
|
|
<live-example name="attribute-binding"></live-example>
|
|
|
|
Demonstrates Angular attribute, class, and style bindings.
|
|
For more information, see [Attribute, class, and style bindings](guide/attribute-binding).
|
|
|
|
### Attribute directives
|
|
|
|
<live-example name="attribute-directives"></live-example>
|
|
|
|
Demonstrates Angular attribute directives.
|
|
For more information, see [Attribute directives](guide/attribute-directives).
|
|
|
|
### Binding syntax
|
|
|
|
<live-example name="binding-syntax"></live-example>
|
|
|
|
Demonstrates Angular's binding syntax.
|
|
For more information, see [Binding syntax: an overview](guide/binding-syntax).
|
|
|
|
### Built-in directives
|
|
|
|
<live-example name="built-in-directives"></live-example>
|
|
|
|
Demonstrates Angular built-in directives.
|
|
For more information, see [Built-in directives](guide/built-in-directives).
|
|
|
|
### Built-in template functions
|
|
|
|
<live-example name="built-in-template-functions"></live-example>
|
|
|
|
Demonstrates Angular built-in template functions.
|
|
For more information, see the [`$any()` type cast function section](guide/template-expression-operators#the-any-type-cast-function) of [Template expression operators](guide/template-expression-operators).
|
|
|
|
### Content projection
|
|
|
|
<live-example name="content-projection"></live-example>
|
|
|
|
Demonstrates how to use Angular's content projection feature when creating reusable components.
|
|
|
|
### Interpolation
|
|
|
|
<live-example name="interpolation"></live-example>
|
|
|
|
Demonstrates Angular interpolation.
|
|
For more information, see [Interpolation and template expressions](guide/interpolation).
|
|
|
|
### Template expression operators
|
|
|
|
<live-example name="template-expression-operators"></live-example>
|
|
|
|
Demonstrates expression operators in Angular templates.
|
|
For more information, see [Template expression operators](guide/template-expression-operators).
|
|
|
|
### Template reference variables
|
|
|
|
<live-example name="template-reference-variables"></live-example>
|
|
|
|
Demonstrates Angular's template reference variables.
|
|
For more information, see [Template reference variables](guide/template-reference-variables).
|
|
|
|
### `<ngcontainer>`
|
|
|
|
<live-example name="ngcontainer"></live-example>
|
|
|
|
Demonstrates `<ngcontainer>`.
|
|
For more information, see the [ng-container section](guide/built-in-directives#ngcontainer) of [Built-in directives](guide/structural-directives) .
|
|
|
|
### Pipes
|
|
|
|
<live-example name="pipes"></live-example>
|
|
|
|
Demonstrates Angular pipes.
|
|
For more information, see [Transforming Data Using Pipes](guide/pipes).
|
|
|
|
### Property binding
|
|
|
|
<live-example name="property-binding"></live-example>
|
|
|
|
Demonstrates property binding in Angular.
|
|
For more information, see [Property binding](guide/property-binding).
|
|
|
|
### Structural directives
|
|
|
|
<live-example name="structural-directives"></live-example>
|
|
|
|
Demonstrates Angular structural directives.
|
|
For more information, see [Structural directives](guide/structural-directives).
|
|
|
|
|
|
### Two-way binding
|
|
|
|
<live-example name="two-way-binding"></live-example>
|
|
|
|
Demonstrates two-way data binding in Angular applications.
|
|
For more information, see [Two-way binding](guide/two-way-binding).
|
|
|
|
### Template syntax
|
|
|
|
<live-example name="template-syntax"></live-example>
|
|
|
|
Comprehensive demonstration of Angular's template syntax.
|
|
For more information, see [Template reference variables](guide/template-syntax).
|
|
|
|
### User input
|
|
|
|
<live-example name="user-input"></live-example>
|
|
|
|
Demonstrates responding to user actions.
|
|
For more information, see [User input](guide/user-input).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Working with components
|
|
|
|
These examples demonstrate features of Angular components.
|
|
|
|
### Component interaction
|
|
|
|
<live-example name="component-interaction"></live-example>
|
|
|
|
Demonstrates how Angular shares data between components.
|
|
For more information, see [Component interaction](guide/component-interaction).
|
|
|
|
### Component styles
|
|
|
|
<live-example name="component-styles"></live-example>
|
|
|
|
Demonstrates styling in Angular apps.
|
|
For more information, see [Component styles](guide/component-styles).
|
|
|
|
### Dynamic component loader
|
|
|
|
<live-example name="dynamic-component-loader"></live-example>
|
|
|
|
Demonstrates how to dynamically load components.
|
|
For more information, see [Dynamic component loader](guide/dynamic-component-loader).
|
|
|
|
### Elements
|
|
|
|
<live-example name="elements"></live-example>
|
|
|
|
Demonstrates using Angular custom elements.
|
|
For more information, see [Angular elements overview](guide/elements).
|
|
|
|
### Event binding
|
|
|
|
<live-example name="event-binding"></live-example>
|
|
|
|
Demonstrates binding to events in Angular.
|
|
For more information, see [Event binding](guide/event-binding).
|
|
|
|
### `@Input()` and `@Output()`
|
|
|
|
<live-example name="inputs-outputs"></live-example>
|
|
|
|
Demonstrates `@Input()` and `@Output()` in components and directives.
|
|
For more information, see [`@Input()` and `@Output()` properties](guide/inputs-outputs).
|
|
|
|
|
|
### Lifecycle hooks
|
|
|
|
<live-example name="lifecycle-hooks"></live-example>
|
|
|
|
Demonstrates Angular lifecycle hooks such as `ngOnInit()` and `ngOnChanges()`.
|
|
For more information, see [Hooking into the component lifecycle](guide/lifecycle-hooks).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Dependency injection
|
|
|
|
### Dependency injection fundamentals
|
|
|
|
<live-example name="dependency-injection"></live-example>
|
|
|
|
Demonstrates fundamentals of Angular dependency injection.
|
|
For more information, see [Dependency injection](guide/dependency-injection).
|
|
|
|
### Dependency injection features
|
|
|
|
<live-example name="dependency-injection-in-action"></live-example>
|
|
|
|
Demonstrates many of the features of Angular dependency injection.
|
|
For more information, see [Dependency injection in action](guide/dependency-injection).
|
|
|
|
### Providing dependencies in NgModules
|
|
|
|
<live-example name="providers"></live-example>
|
|
|
|
Demonstrates providing services in NgModules.
|
|
For more information, see [Providing dependencies in modules](guide/providers).
|
|
|
|
|
|
### Hierarchical dependency injection
|
|
|
|
<live-example name="hierarchical-dependency-injection"></live-example>
|
|
|
|
Demonstrates Angular injector trees and resolution modifiers.
|
|
For more information, see [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
|
|
|
### Dependency injection with `providers` and `viewProviders`
|
|
|
|
<live-example name="providers-viewproviders"></live-example>
|
|
|
|
Demonstrates how `providers` and `viewproviders` affect dependency injection.
|
|
For more information, see the [Providing services in `@Component()`](guide/hierarchical-dependency-injection#providing-services-in-component) section of [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
|
|
|
|
|
### Resolution modifiers and dependency injection
|
|
|
|
<live-example name="resolution-modifiers"></live-example>
|
|
|
|
Demonstrates Angular's resolution modifiers, such as `@Self()`.
|
|
For more information, see the [Modifying service visibility](guide/hierarchical-dependency-injection#modifying-service-visibility) section of [Hierarchical injectors](guide/hierarchical-dependency-injection).
|
|
|
|
|
|
|
|
## Forms
|
|
|
|
### Forms overview
|
|
|
|
<live-example name="forms-overview"></live-example>
|
|
|
|
Demonstrates foundational concepts of Angular forms.
|
|
For more information, see [Introduction to forms in Angular](guide/forms-overview).
|
|
|
|
### Reactive forms
|
|
|
|
<live-example name="reactive-forms"></live-example>
|
|
|
|
Demonstrates Angular's reactive forms.
|
|
For more information, see [Reactive forms](guide/reactive-forms).
|
|
|
|
### Template-driven forms
|
|
|
|
<live-example name="forms"></live-example>
|
|
|
|
Demonstrates Angular template-driven forms.
|
|
For more information, see [Building a template-driven form](guide/forms).
|
|
|
|
### Form validation
|
|
|
|
<live-example name="form-validation"></live-example>
|
|
|
|
Demonstrates validating forms in Angular.
|
|
For more information, see [Validating form input](guide/form-validation).
|
|
|
|
### Dynamic forms
|
|
|
|
<live-example name="dynamic-form"></live-example>
|
|
|
|
Demonstrates creating dynamic forms.
|
|
For more information, see [Building dynamic forms](guide/dynamic-form).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## NgModules
|
|
|
|
### NgModules
|
|
|
|
<live-example name="ngmodules"></live-example>
|
|
|
|
Demonstrates fundamentals of NgModules.
|
|
For more information, see [NgModules](guide/ngmodules).
|
|
|
|
### Feature modules
|
|
|
|
<live-example name="feature-modules"></live-example>
|
|
|
|
Demonstrates using feature modules in Angular.
|
|
For more information, see [Feature modules](guide/feature-modules).
|
|
|
|
### Lazy loading NgModules
|
|
|
|
<live-example name="lazy-loading-ngmodules"></live-example>
|
|
|
|
Demonstrates lazy loading NgModules.
|
|
For more information, see [Lazy-loading feature modules](guide/lazy-loading-ngmodules).
|
|
|
|
|
|
## Routing
|
|
|
|
### Router
|
|
|
|
<live-example name="router"></live-example>
|
|
|
|
Demonstrates Angular's routing features.
|
|
For more information, see [Router](guide/router).
|
|
|
|
### Router tutorial
|
|
|
|
<live-example name="router-tutorial"></live-example>
|
|
|
|
Demonstrates Angular's fundamental routing techniques.
|
|
For more information, see [Using Angular routes in a single-page application](guide/router-tutorial).
|
|
|
|
|
|
|
|
### Style guide for Documentation contributions
|
|
|
|
<live-example name="docs-style-guide"></live-example>
|
|
|
|
Demonstrates Angular documentation style guidelines.
|
|
For more information, see [Angular documentation style guide](guide/docs-style-guide).
|
|
|
|
|
|
## Server communication
|
|
|
|
### `HttpClient`
|
|
|
|
<live-example name="http"></live-example>
|
|
|
|
Demonstrates server interaction using HTTP.
|
|
For more information, see [Communicating with backend services using HTTP](guide/http).
|
|
|
|
|
|
## Workflow
|
|
|
|
### Security
|
|
|
|
<live-example name="security"></live-example>
|
|
|
|
Demonstrates security concepts in Angular applications.
|
|
For more information, see [Security](guide/security).
|
|
|
|
|
|
### Testing
|
|
|
|
For the sample app that the testing guides describe, see the <live-example noDownload name="testing">sample app</live-example>.
|
|
|
|
For the tests featured in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.
|
|
|
|
Demonstrates techniques for testing Angular.
|
|
For more information, see [Testing](guide/testing).
|
|
|
|
|
|
|
|
|
|
## Hybrid Angular applications
|
|
|
|
### AngularJS to Angular concepts: Quick reference
|
|
|
|
<live-example name="ajs-quick-reference"></live-example>
|
|
|
|
Demonstrates Angular for those with an AngularJS background.
|
|
For more information, see [AngularJS to Angular concepts: Quick reference](guide/ajs-quick-reference).
|
|
|