',
+ styles: ['h1 { font-weight: normal; }']
+})
+// #enddocregion styles
+
+export class ComponentOverviewComponent {
+
+}
+
diff --git a/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.css b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.html b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.html
new file mode 100644
index 0000000000..ffe0904017
--- /dev/null
+++ b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.html
@@ -0,0 +1 @@
+
component-overview works!
diff --git a/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts
new file mode 100644
index 0000000000..61d3e433c6
--- /dev/null
+++ b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComponentOverviewComponent } from './component-overview.component';
+
+describe('ComponentOverviewComponent', () => {
+ let component: ComponentOverviewComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ComponentOverviewComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ComponentOverviewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.ts b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.ts
new file mode 100644
index 0000000000..7e1e3597a1
--- /dev/null
+++ b/aio/content/examples/component-overview/src/app/component-overview/component-overview.component.ts
@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+// #docregion decorator, decorator-skeleton, selector, templateUrl
+@Component({
+// #enddocregion decorator-skeleton
+ selector: 'app-component-overview',
+// #enddocregion selector
+ templateUrl: './component-overview.component.html',
+// #enddocregion templateUrl
+ styleUrls: ['./component-overview.component.css']
+// #docregion decorator-skeleton, selector, templateUrl
+})
+// #enddocregion decorator, decorator-skeleton, selector, templateUrl
+
+// #docregion class
+export class ComponentOverviewComponent {
+
+}
+// #enddocregion class
diff --git a/aio/content/examples/component-overview/src/index.html b/aio/content/examples/component-overview/src/index.html
new file mode 100644
index 0000000000..743fd8d693
--- /dev/null
+++ b/aio/content/examples/component-overview/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ ComponentOverview
+
+
+
+
+
+
+
+
diff --git a/aio/content/examples/component-overview/src/main.ts b/aio/content/examples/component-overview/src/main.ts
new file mode 100644
index 0000000000..c7b673cf44
--- /dev/null
+++ b/aio/content/examples/component-overview/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.error(err));
diff --git a/aio/content/examples/component-overview/stackblitz.json b/aio/content/examples/component-overview/stackblitz.json
new file mode 100644
index 0000000000..865a94123a
--- /dev/null
+++ b/aio/content/examples/component-overview/stackblitz.json
@@ -0,0 +1,8 @@
+{
+ "description": "Component Overview",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["overview", "component"]
+}
diff --git a/aio/content/guide/component-overview.md b/aio/content/guide/component-overview.md
new file mode 100644
index 0000000000..a0ecb998dd
--- /dev/null
+++ b/aio/content/guide/component-overview.md
@@ -0,0 +1,182 @@
+# Angular Components Overview
+
+Components are the main building block for Angular applications. Each component consists of:
+
+* An HTML template that declares what renders on the page
+* A Typescript class that defines behavior
+* A CSS selector that defines how the component is used in a template
+* Optionally, CSS styles applied to the template
+
+This topic describes how to create and configure an Angular component.
+
+
+
+To view or download the example code used in this topic, see the .
+
+
+
+## Prerequisites
+
+To create a component, verify that you have met the following prerequisites:
+
+1. Install the Angular CLI.
+1. Create an Angular project.
+ If you don't have a project, you can create one using `ng new `, where `` is the name of your Angular application.
+
+## Creating a component
+
+The easiest way to create a component is with the Angular CLI. You can also create a component manually.
+
+### Creating a component using the Angular CLI
+
+To create a component using the Angular CLI:
+
+1. From a terminal window, navigate to the directory containing your application.
+1. Run the `ng generate component ` command, where `` is the name of your new component.
+
+By default, this command creates the following:
+
+* A folder named after the component
+* A component file, `.component.ts`
+* A template file, `.component.ts`
+* A CSS file, `.component.css`
+* A testing specification file, `.component.spec.ts`
+
+Where `` is the name of your component.
+
+
+
+You can change how `ng generate component` creates new components.
+For more information, see [ng generate component](cli/generate#component-command) in the Angular CLI documentation.
+
+
+
+### Creating a component manually
+
+Although the Angular CLI is the easiest way to create an Angular component, you can also create a component manually.
+This section describes how to create the core component file within an existing Angular project.
+
+To create a new component manually:
+
+1. Navigate to your Angular project directory.
+1. Create a new file, `.component.ts`.
+1. At the top of the file, add the following import statement.
+
+
+
+
+1. After the `import` statement, add a `@Component` decorator.
+
+
+
+
+1. Choose a CSS selector for the component.
+
+
+
+
+ For more information on choosing a selector, see [Specifying a component's selector](#specifying-a-components-css-selector).
+
+1. Define the HTML template that the component uses to display information.
+ In most cases, this template is a separate HTML file.
+
+
+
+
+ For more information on defining a component's template, see [Defining a component's template](#defining-a-components-template).
+
+1. Select the styles for the component's template.
+ In most cases, you define the styles for you component's template in a separate file.
+
+
+
+
+1. Add a `class` statement that includes the code for the component.
+
+
+
+
+## Specifying a component's CSS selector
+
+Every component requires a CSS _selector_. A selector instructs Angular to instantiate this component wherever it finds the corresponding tag in template HTML. For example, consider a component, `hello-world.component.ts` that defines its selector as `app-hello-world`. This selector instructs angular to instantiate this component any time the tag, `` in a template.
+
+To specify a component's selector, add a `selector` statement to the `@Component` decorator.
+
+
+
+
+## Defining a component's template
+
+A template is a block of HTML that tells Angular how to render the component in your application.
+You can define a template for your component in one of two ways: by referencing an external file, or directly within the component.
+
+To define a template as an external file, add a `templateUrl` property to the `@Component` decorator.
+
+
+
+
+To define a template within the component, add a `template` property to the `@Component` decorator that contains the HTML you want to use.
+
+
+
+
+If your want your template to span multiple lines, you can use backticks ( ` ).
+For example:
+
+
+
+
+
+
+An Angular component requires a template defined using `template` or `templateUrl`. You cannot have both statements in a component.
+
+
+
+## Declaring a component's styles
+
+You can declare component styles uses for its template in one of two ways: by referencing an external file, or directly within the component.
+
+To declare the styles for a component in a separate file, add a `stylesUrls` property to the `@Component` decorator.
+
+
+
+
+To select the styles within the component, add a `styles` property to the `@Component` decorator that contains the styles you want to use.
+
+
+
+
+The `styles` property takes an array of strings that contain the CSS rule declarations.
+
+
+## Next steps
+
+* For an archictural overview of components, see [Introduction to components and templates](guide/architecture-components).
+* For additional options you can use when creating a component, see [Component](api/core/Component) in the API Reference.
+* For more information on styling components, see [Component styles](guide/component-styles).
+* For more information on templates, see [Template syntax](guide/template-syntax).
+
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 8e05b9d815..2f2266b3a1 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -101,6 +101,11 @@
"title": "Components",
"tooltip": "Building dynamic views with data binding",
"children": [
+ {
+ "url": "guide/component-overview",
+ "title": "Overview",
+ "tooltip": "Overview of how to create Angular components."
+ },
{
"url": "guide/user-input",
"title": "User Input",