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;
}
}