Skip to main content

Components

Components are the basic building blocks of an Angular application. They control a part of the UI and encapsulate the logic and template.

Overview​

Usage​

They are defined using the @Component decorator.

your.component.ts
@Component({
  selector: "app-your-comp",
  standalone: true,
  imports: [],
  providers: [],
  templateUrl: "./your.component.html",
  styleUrls: ["./your.component.scss"],
})
export class YourComponent {}

To bind the component you can call the selector within the HTML template.

parent.component.html
<app-your-comp></app-your-comp>
<!-- OR shorted -->
<app-your-comp />

Components can also be embedded by the router config (see Route docs).