Search⌘ K
Home
Courses
The Angular Masterclass

The Structure of a Component

Explore the fundamental structure of an Angular component, focusing on the @Component decorator, its selector, template, and style definitions. Understand how the component class manages properties and methods to control the application's interface and behavior. Learn how templates connect with business logic following the MVC pattern and how event handling integrates user actions with component logic.

We'll cover the following...

A component is made up of two main parts:

  • The @Component decorator
  • The component class.

@Component decorator

The following example shows a component. As you can see, there is the @Component decorator, which has three parts to it:

  • The selector
  • The template URL
  • The styles URL

For example, here is a Component class:

import { Component } from "@angular/core";
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
})
export class AppComponent {
    title = "Welcome to your component";
    yourName: string;
    showForm = false;
    constructor() {}
    displayYourName(name: string) {
        this.yourName = name;
    }
    toggleDisplay() {
        this.showForm = true;
    }
}

In this Component class, we have a few things going on, in the @Component decorator (a Component class uses the ...