Modules, components, and data binding

Previous sections, Project structure and Angular architecture, already described the basic structure of components. This section provides a few missing details and focuses on bindings and how to pass input to components.

As already discussed, components are made up of three parts: a TypeScript class decorated with the @Component decorator, an HTML template, and CSS styles. The TypeScript class has a leading role since the other two parts are specified as properties of the @Component class decorator together with the component tag name:

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
  isExpanded = false;

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

...