The Structure of a Component

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 ...