{ "id": "guide/example-apps-list", "title": "Example applications", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Example applicationslink

\n

The following is a list of the example applications in the Angular documentation.

\n

Fundamentalslink

\n

These examples demonstrate minimal, fundamental concepts.

\n

Getting started applicationlink

\n

\n

Introductory application demonstrating Angular features.\nFor more information, see Getting started.

\n

Launching your applink

\n

\n

Demonstrates the Angular bootstrapping process.\nFor more information, see Launching your app with a root module.

\n

Structure of Angular applicationslink

\n

\n

Demonstrates the fundamental architecture of Angular applications.\nFor more information, see Introduction to Angular concepts.

\n

Setting the document titlelink

\n

\n

Demonstrates customizing the document title in the browser.\nFor more information, see Set the document title.

\n

Tour of Heroes tutorial applicationlink

\n

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.

\n

Tour of Heroes: completed applicationlink

\n

\n

Completed Tour of Heroes example application.\nFor more information, see Tour of Heroes app and tutorial.

\n

Tour of Heroes: Creating an applicationlink

\n

\n

Initial Tour of Heroes example application for beginning the tutorial.\nFor more information, see Create a new project.

\n

Tour of Heroes: The hero editorlink

\n

\n

First step of the Tour of Heroes example application.\nFor more information, see The hero editor.

\n

Tour of Heroes: Display a selection listlink

\n

\n

Second step of the Tour of Heroes example application.\nFor more information, see Display a selection list.

\n

Tour of Heroes: Create a feature componentlink

\n

\n

Third step of the Tour of Heroes example application.\nFor more information, see Create a feature component.

\n

Tour of Heroes: Add serviceslink

\n

\n

Fourth step of the Tour of Heroes example application.\nFor more information, see Add services.

\n

Tour of Heroes: Add in-app navigation with routinglink

\n

\n

Fifth step of the Tour of Heroes example application.\nFor more information, see Add in-app navigation with routing.

\n

Tour of Heroes: Get data from a serverlink

\n

\n

Sixth and final step of the Tour of Heroes example application.\nFor more information, see Get data from a server.

\n

Working with templateslink

\n

These examples demonstrate features of Angular templates.

\n

Accessibilitylink

\n

\n

Demonstrates building Angular applications in a more accessible way.\nFor more information, see Accessibility.

\n

Animationslink

\n

\n

Demonstrates Angular's animation features.\nFor more information, see Introduction to Angular animations.

\n

Attribute, class, and style bindingslink

\n

\n

Demonstrates Angular attribute, class, and style bindings.\nFor more information, see Attribute, class, and style bindings.

\n

Attribute directiveslink

\n

\n

Demonstrates Angular attribute directives.\nFor more information, see Attribute directives.

\n

Binding syntaxlink

\n

\n

Demonstrates Angular's binding syntax.\nFor more information, see Binding syntax: an overview.

\n

Built-in directiveslink

\n

\n

Demonstrates Angular built-in directives.\nFor more information, see Built-in directives.

\n

Built-in template functionslink

\n

\n

Demonstrates Angular built-in template functions.\nFor more information, see the $any() type cast function section of Template expression operators.

\n

Interpolationlink

\n

\n

Demonstrates Angular interpolation.\nFor more information, see Interpolation and template expressions.

\n

Template expression operatorslink

\n

\n

Demonstrates expression operators in Angular templates.\nFor more information, see Template expression operators.

\n

Template reference variableslink

\n

\n

Demonstrates Angular's template reference variables.\nFor more information, see Template reference variables.

\n

<ngcontainer>link

\n

\n

Demonstrates <ngcontainer>.\nFor more information, see the ng-container section of Built-in directives .

\n

Pipeslink

\n

\n

Demonstrates Angular pipes.\nFor more information, see Transforming Data Using Pipes.

\n

Property bindinglink

\n

\n

Demonstrates property binding in Angular.\nFor more information, see Property binding.

\n

Structural directiveslink

\n

\n

Demonstrates Angular structural directives.\nFor more information, see Structural directives.

\n

Two-way bindinglink

\n

\n

Demonstrates two-way data binding in Angular applications.\nFor more information, see Two-way binding.

\n

Template syntaxlink

\n

\n

Comprehensive demonstration of Angular's template syntax.\nFor more information, see Template reference variables.

\n

User inputlink

\n

\n

Demonstrates responding to user actions.\nFor more information, see User input.

\n

Working with componentslink

\n

These examples demonstrate features of Angular components.

\n

Component interactionlink

\n

\n

Demonstrates how Angular shares data between components.\nFor more information, see Component interaction.

\n

Component styleslink

\n

\n

Demonstrates styling in Angular apps.\nFor more information, see Component styles.

\n

Dynamic component loaderlink

\n

\n

Demonstrates how to dynamically load components.\nFor more information, see Dynamic component loader.

\n

Elementslink

\n

\n

Demonstrates using Angular custom elements.\nFor more information, see Angular elements overview.

\n

Event bindinglink

\n

\n

Demonstrates binding to events in Angular.\nFor more information, see Event binding.

\n

@Input() and @Output()link

\n

\n

Demonstrates @Input() and @Output() in components and directives.\nFor more information, see @Input() and @Output() properties.

\n

Lifecycle hookslink

\n

\n

Demonstrates Angular lifecycle hooks such as ngOnInit() and ngOnChanges().\nFor more information, see Hooking into the component lifecycle.

\n

Dependency injectionlink

\n

Dependency injection fundamentalslink

\n

\n

Demonstrates fundamentals of Angular dependency injection.\nFor more information, see Dependency injection.

\n

Dependency injection featureslink

\n

\n

Demonstrates many of the features of Angular dependency injection.\nFor more information, see Dependency injection in action.

\n

Providing dependencies in NgModuleslink

\n

\n

Demonstrates providing services in NgModules.\nFor more information, see Providing dependencies in modules.

\n

Hierarchical dependency injectionlink

\n

\n

Demonstrates Angular injector trees and resolution modifiers.\nFor more information, see Hierarchical injectors.

\n

Dependency injection with providers and viewProviderslink

\n

\n

Demonstrates how providers and viewproviders affect dependency injection.\nFor more information, see the Providing services in @Component() section of Hierarchical injectors.

\n

Resolution modifiers and dependency injectionlink

\n

\n

Demonstrates Angular's resolution modifiers, such as @Self().\nFor more information, see the Modifying service visibility section of Hierarchical injectors.

\n

Formslink

\n

Forms overviewlink

\n

\n

Demonstrates foundational concepts of Angular forms.\nFor more information, see Introduction to forms in Angular.

\n

Reactive formslink

\n

\n

Demonstrates Angular's reactive forms.\nFor more information, see Reactive forms.

\n

Template-driven formslink

\n

\n

Demonstrates Angular template-driven forms.\nFor more information, see Building a template-driven form.

\n

Form validationlink

\n

\n

Demonstrates validating forms in Angular.\nFor more information, see Validating form input.

\n

Dynamic formslink

\n

\n

Demonstrates creating dynamic forms.\nFor more information, see Building dynamic forms.

\n

NgModuleslink

\n

NgModuleslink

\n

\n

Demonstrates fundamentals of NgModules.\nFor more information, see NgModules.

\n

Feature moduleslink

\n

\n

Demonstrates using feature modules in Angular.\nFor more information, see Feature modules.

\n

Lazy loading NgModuleslink

\n

\n

Demonstrates lazy loading NgModules.\nFor more information, see Lazy-loading feature modules.

\n

Routinglink

\n

Routerlink

\n

\n

Demonstrates Angular's routing features.\nFor more information, see Router.

\n

Router tutoriallink

\n

\n

Demonstrates Angular's fundamental routing techniques.\nFor more information, see Using Angular routes in a single-page application.

\n

Style guide for Documentation contributionslink

\n

\n

Demonstrates Angular documentation style guidelines.\nFor more information, see Angular documentation style guide.

\n

Server communicationlink

\n

HttpClientlink

\n

\n

Demonstrates server interaction using HTTP.\nFor more information, see Communicating with backend services using HTTP.

\n

Workflowlink

\n

Securitylink

\n

\n

Demonstrates security concepts in Angular applications.\nFor more information, see Security.

\n

Testinglink

\n

For the sample app that the testing guides describe, see the sample app.

\n

For the tests featured in the testing guides, see tests.

\n

Demonstrates techniques for testing Angular.\nFor more information, see Testing.

\n

Hybrid Angular applicationslink

\n

AngularJS to Angular concepts: Quick referencelink

\n

\n

Demonstrates Angular for those with an AngularJS background.\nFor more information, see AngularJS to Angular concepts: Quick reference.

\n\n \n
\n\n\n" }