Skip to content
Angular

Component Basics

Define an Angular component with selector, template, and styles.

By EZ4Code Team
componentbasics

Code

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

@Component({
  selector: "app-hello",
  standalone: true,
  template: "<h1>Hello, {{ name }}!</h1>",
  styles: ["h1 { color: #1976d2; }"]
})
export class HelloComponent {
  name = "Angular";
}

Explanation

The @Component decorator marks a class as an Angular component with metadata. The selector defines the custom HTML tag, template holds the view markup, and styles scope CSS to the component. Standalone components skip NgModule declarations and import dependencies directly.

More Angular Snippets

Template Syntax & Binding

Interpolation, property, event, and two-way binding in Angular templates.

Built-in Directives

Use *ngIf, *ngFor, ngClass, and ngStyle to shape the DOM.

Pipes & Custom Pipe

Transform template values with built-in and custom pipes.

Services & Dependency Injection

Create an injectable service and consume it in a component.

Routing Configuration

Define routes with params, lazy loading, and redirects.

Reactive Forms

Build a typed reactive form with FormBuilder and validators.