Creating Your First Angular 2 Components

Key Takeaways

• An Angular component combines a TypeScript class, an HTML template, and metadata supplied by @Component.
• The CLI generates standalone components by default. To display a child component, make it available to the parent’s template and use its selector.
• {{ title }} is interpolation: it displays state, but it doesn’t update that state from user input.
• A component is a directive with its own template. Other directives add behavior to existing elements or change which views are rendered.

To create an Angular component, run ng generate component welcome, import the generated component into its parent, and place <app-welcome></app-welcome> in the parent’s template. You’ll build that complete parent-and-child example below, starting with a simple title property.

Angular Components Overview

Think of a component as one piece of your interface: a welcome message, navigation bar, or account panel. Its TypeScript class holds state and behavior; its template describes what Angular renders. Components can also have their own styles.

What Happened to $scope?

If you’re coming from AngularJS, don’t look for a $scope object in these examples. State lives on the component instance, and template expressions can access component members alongside template-local variables. You normally write {{ title }} in the template; this is implied when referring to a class member.

For the historical distinction, see our comparison of Angular and AngularJS. Here, you’ll work with TypeScript classes and Angular templates—not AngularJS controllers.

Angular Component vs. Directive

Components and directives aren’t competing concepts. A component is a specialized directive that owns a template. Choose based on whether you need a new UI unit or reusable behavior on an existing element.

These are Angular’s three main directive categories. For ordinary conditions and loops in new templates, Angular also provides built-in @if and @for blocks; those are template control-flow syntax, not directives you import.

How Components Differ from Services

Components handle presentation and user interaction. Services share functionality such as data access, business rules, or state across components through dependency injection—supplying a dependency rather than constructing it inside the component. Our Angular services tutorial explores that separation.

Create an Angular Component with the CLI

Set Up the Angular Project

Install Node.js and npm first, choosing a Node.js release supported by the Angular compatibility table. Then install the CLI version used here. If you need installation help, start with our Angular CLI installation guide.

npm install -g @angular/cli@22.2.3
ng version
ng new angular-components --routing=false --ssr=false --style=css --defaults
cd angular-components
ng version
ng serve

ng new creates the workspace, application, and dependencies. These options disable routing and server-side rendering, select CSS, and accept defaults for options that have them. New applications use the standalone API by default.

ng version reports the CLI version; run it inside the workspace when recording your environment. ng serve starts the development server and rebuilds when files change. Open http://localhost:4200, the default local address.

The CLI’s default 2025 file-naming convention uses src/app/app.ts for the root component. Older or differently configured projects may use app.component.ts instead. Follow your generated filenames rather than renaming files to match an older tutorial.

Generate the Welcome Component

Leave the development server running. Open another terminal in the angular-components directory and run:

ng generate component welcome

With the fresh workspace above, the default generator creates welcome.ts, welcome.html, welcome.css, and welcome.spec.ts under src/app/welcome/. Workspace settings and generator options can change this layout—for example, by using an inline template or skipping tests.

Generating a standalone component doesn’t select a parent or insert its selector into a template. You’ll make those connections explicitly.

Add the First Title Interpolation

Replace src/app/welcome/welcome.ts with:

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrl: './welcome.css',
})
export class Welcome {
  title = 'app';
}

Replace src/app/welcome/welcome.html with:

<h2>Welcome to {{ title }}!</h2>

Leave welcome.css empty for now. The component is standalone even without an explicit standalone: true: that decorator option defaults to true starting with Angular 19.

Import and Render the Child Component

Replace src/app/app.ts with this parent component. Its inline template replaces the starter template; the unused starter HTML and CSS files can remain.

import { Component } from '@angular/core';
import { Welcome } from './welcome/welcome';

@Component({
  selector: 'app-root',
  imports: [Welcome],
  template: `
    <main>
      <app-welcome></app-welcome>
    </main>
  `,
})
export class App {}

There are three separate connections: the TypeScript import makes Welcome available in this file; imports: [Welcome] makes it available to this component’s template; the matching selector tells Angular where to instantiate it. Importing a component alone doesn’t display it.

App: parent component
  imports: [Welcome]
  template: <app-welcome></app-welcome>
                 |
                 v
  Welcome: child component
    TypeScript state + welcome.html + welcome.css

You should now see Welcome to app! Angular renders the child’s template inside its matching host element, <app-welcome>. The selector identifies where the component belongs; it doesn’t introduce a new HTML language feature.

Anatomy of the @Component Decorator

Component is imported from @angular/core. The @Component decorator supplies Angular’s configuration metadata for the class. In these examples:

• selector identifies matching elements in Angular templates.
• templateUrl points to a template file; template supplies an inline template instead. Don’t specify both.
• styleUrl points to one stylesheet. styleUrls, the array form you may see in older examples, is also supported.
• imports lists a standalone component’s template dependencies, including components, directives, pipes, and NgModules.

The relative template and stylesheet paths resolve from the component’s directory. These metadata fields describe Angular behavior; title = 'app', by contrast, is a property initializer on the TypeScript class.

Interpolation, Property Binding, Events, and Two-Way Binding

The first example only reads state. To make it interactive, replace welcome.ts with the following version, which uses a signal—a value wrapper that notifies Angular when its value changes. Read a signal by calling it, and change its value with set().

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-welcome',
  imports: [FormsModule],
  templateUrl: './welcome.html',
  styleUrl: './welcome.css',
})
export class Welcome {
  title = signal('app');

  resetTitle(): void {
    this.title.set('app');
  }
}

Then replace welcome.html with:

<h2>Welcome to {{ title() }}!</h2>

<label for="welcome-title">Application title</label>
<input id="welcome-title" type="text" [(ngModel)]="title" />

<button
  type="button"
  [disabled]="title() === 'app'"
  (click)="resetTitle()"
>
  Reset title
</button>

This example uses four binding patterns:

• Interpolation: {{ title() }} reads state into text.
• Property binding: [disabled] sets the button’s DOM property from the expression’s boolean result. Both interpolation and property binding send data toward the view.
• Event binding: (click) runs resetTitle() when the button emits a click event.
• Two-way binding: [(ngModel)] keeps the input and component state synchronized, combining value binding with change-event handling.

FormsModule supplies ngModel and belongs in the imports of the component whose template uses it. With this writable signal, use [(ngModel)]="title", not [(ngModel)]="title()"; interpolation still reads the value with title(). Angular’s forms documentation demonstrates this signal-backed pattern.

Type a different application title, then select Reset title. The heading, input, and button state should respond together. This small control demonstrates binding mechanics; for larger forms, see our comparison of template-driven and reactive Angular forms.

Creating Components Manually

You can skip ng generate component and create the files yourself. Inside the same CLI-created workspace:

1. Create src/app/welcome/.
2. Add welcome.ts and welcome.html using either complete example above, plus an empty welcome.css.
3. Import Welcome into App and add it to the parent’s imports.
4. Place <app-welcome></app-welcome> in the parent’s template.

The CLI automates scaffolding, not the component model. The same class, metadata, template dependency, and selector connections apply when you write the files manually.

Working in an Existing NgModule-Based Application

Don’t create an app.module.ts just to follow an old tutorial. Angular recommends standalone components for new code, but existing NgModule applications have a different integration path:

• A standalone component goes in the consuming NgModule’s imports, not its declarations.
• A non-standalone component must specify standalone: false and belong to exactly one NgModule’s declarations.
• For a non-standalone component, template dependencies such as FormsModule belong in the NgModule’s imports, not component-level imports.
• Export a module-declared component when consumers outside that module need it, and import its module where it will be used. You still place the component’s selector in the consuming template.

Common Mistakes

• Importing only the TypeScript symbol. The parent also needs the appropriate template dependency in its Angular metadata.
• Hiding an unknown-element error. Check the selector and consuming component’s imports instead of suppressing the error with a schema.
• Calling interpolation two-way binding. Displaying a property doesn’t provide a path for user input to update it.

Run ng build from the workspace root to check compilation. When you replace starter markup, also update any generated test assertions that still expect that markup.

FAQ

How do I generate an Angular component with the CLI?

Run ng generate component welcome from your Angular workspace. With the default configuration, it generates a standalone component; you still import it into its consumer and add its selector to the consuming template.

Are Angular components standalone by default?

Yes. Current Angular components are standalone unless configured otherwise, and the CLI generates standalone components by default. The @Component standalone option has defaulted to true since Angular 19.

How do I use a child component in a standalone Angular app?

Import the child class into the parent’s TypeScript file, add it to the parent’s @Component imports array, and use its selector in the parent template. This is also how you nest standalone components.

What is the difference between an Angular component and a directive?

A component is a directive with its own template. Attribute directives add behavior or appearance to existing elements, while structural directives change the DOM layout by adding or removing views.

Is {{ }} two-way data binding in Angular?

No. Double braces perform interpolation, which displays a value as text. Two-way binding combines value binding with change handling; [(ngModel)] is one example and requires FormsModule for native form controls.

Further Reading

• Angular component essentials — defining and composing components.
• Angular CLI: ng new — workspace options and file-naming conventions.
• Angular CLI: generate component — generator options and defaults.
• @Component API reference — metadata fields and template dependencies.
• Angular directives overview — components, attribute directives, and structural directives.
• Angular text and property binding — interpolation and DOM properties.
• Angular two-way binding — form controls and component bindings.
• Angular signals — reading and updating reactive state.