Componentes en Angular

How are Angular applications structured from their components?

In Angular, components are the basis for building robust applications, as if they were Lego pieces that allow you to create large architectures. An Angular component is composed of a template, a CSS and a TypeScript logic file. The communication between the template and the logic is done through property binding and event binding. These allow sending data from the logic to the template and receiving events from the user, such as clicks or key presses, to modify properties of the component.

How to create and organize your own components?

The versatility of Angular is not limited to using only standard HTML tags; you can develop your own components, with custom properties and events. When starting a large project, it is convenient to organize the application into modules or domains. Each domain can represent different sections of the project, such as products, sales or authentication. You can structure your project in this way:

• Folders per domain: Each domain such as "products" or "sales" will have its own folder.
• Subfolders for pages and components: Within each domain, you can create:
  • Pages: mainly used in the routing of the application.
  • Components: The reusable blocks that make up these pages.

How to generate components from the terminal?

Once the structure is defined, go to the terminal to start creating the components. Use the command ng generate or its abbreviation ng g. For example:

ng generate component domains/products/pages/list.

This command creates a list page within the products domain. For more specific components, e.g. for an individual product:

ng generate component domains/products/components/product

How to integrate the components into the routing system?

The next step is to modify the routing system so that your application does not depend exclusively on the app component, but allows the use of pages and components defined in your modular project. For this purpose it is used:

• Router Outlet: this is the element that allows route recognition and component rendering according to the user's navigation.

In the routes file, it ensures that the app component contains the router outlet to activate the routing logic, and defines the necessary routes as the initial empty route ('') rendered by the list component:

const routes: Routes = [ { path: '', component: ListComponent }, // other routes];

Do I need a separate file for each template?

For very small templates, Angular offers flexibility. It is not mandatory to create a separate HTML file for each single template. You could simplify by defining the template directly in the component using the template property instead of templateUrl. Despite this option, if the template requires complex logic, it is preferable to have it in a separate file. This helps to keep the code clean and easy to manage.

How can I reduce the size of the app.component?

The app.component can become very light if you choose to remove a dedicated CSS file and any unnecessary HTML files, as long as you contain the necessary logic within the component:

• Elimination of unnecessary files: When all global styles are consolidated into a single styles.css file, the app.component's own CSS file can be redundant and removed.
• Template simplification: If you have a minimal template, define it directly in the component to avoid extra files.

With these actions, you reduce complexity and improve the performance of your application as it grows.