Skip to main content

​
Architecture Overview

The Odontología Frontend application is built using Angular’s standalone components architecture. This modern approach eliminates the need for NgModules and provides a more streamlined component structure.

​
Standalone Components

All components in the application use the standalone: true flag, which allows them to:
  • Self-contained imports: Each component explicitly declares its dependencies
  • Direct usage: Components can be imported directly without module wrappers
  • Simplified testing: Standalone components are easier to test in isolation
  • Better tree-shaking: Unused code is more easily eliminated from production builds
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule, RouterModule],
  templateUrl: './example.html',
  styleUrl: './example.css'
})
export class ExampleComponent {
  // Component logic
}

​
Component Categories

The application components are organized into several categories:

​
Layout Components

Header

Top navigation bar displaying page titles and user information

Menu

Collapsible sidebar navigation with route links

​
Feature Components

Patient List

Searchable table view of all patients with filtering

Appointment View

Manage and edit appointments with status updates

Calendar View

Weekly calendar grid showing appointments by day and time

​
Import Pattern

The application follows a consistent import pattern across all components:
  1. Angular Core: Component decorator, lifecycle hooks, signals
  2. Angular Common: CommonModule for directives like *ngIf and *ngFor
  3. Forms: FormsModule for template-driven forms with [(ngModel)]
  4. Router: Navigation and routing functionality
  5. Services: Application-specific services for data management
  6. Child Components: Other standalone components used in templates
// Angular core
import { Component, OnInit, signal } from '@angular/core';

// Angular common modules
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

// Application services
import { PatientService } from '../services/patient.service';

// Child components
import { NewAppointment } from '../new-appointment/new-appointment';

​
Styling Approach

Each component has its own CSS file using Angular’s component-scoped styling:
  • Scoped styles: Styles are automatically scoped to the component
  • CSS variables: Global design tokens defined in app.css
  • BEM methodology: Class names follow Block-Element-Modifier convention
  • Responsive design: Mobile-first approach with media queries

​
State Management

Components use Angular signals for reactive state management:
​
signal()
function
Creates a writable signal for local component state
​
toSignal()
function
Converts Observables to signals for seamless integration
​
computed()
function
Derives values from other signals with automatic updates

​
Service Integration

Components interact with services for data operations:
  • PatientService: CRUD operations for patient data
  • AppointmentService: Manage appointments and calendar data
  • Router: Navigation between views
export class Patient implements OnInit {
  constructor(private patientService: PatientService) { }

  ngOnInit(): void {
    this.patients = this.patientService.getPatients();
  }
}

​
Template Patterns

Common template patterns used across components:

​
Conditional Rendering

<div *ngIf="isModalOpen">Modal content</div>

​
List Rendering

<tr *ngFor="let item of filteredItems">
  <td>{{ item.name }}</td>
</tr>

​
Two-way Binding

<input [(ngModel)]="searchText" />

​
Event Handling

<button (click)="handleClick()">Click me</button>

​
Dynamic Classes

<div [class.active]="isActive" [ngClass]="statusClass">

​
Next Steps

Explore the individual component documentation to learn about specific implementations:

Build docs developers (and LLMs) love

Get started for freeTalk to us