🧩 Componentes - ecosif-angular

📋 Visão Geral

Este documento lista e descreve os principais componentes da aplicação ecosif-angular.

📊 Estatísticas de Componentes

• Total de Componentes: ~200
• Páginas Funcionais: ~87
• Componentes Compartilhados: ~15
• Layout Components: ~5
• Feature Components: ~10

🏗️ Estrutura de Componentes

1. Componentes de Páginas (Pages)

Localização: src/app/pages/

Cadastros

Movimentações

Consultas

Relatórios

Administração

2. Layout Components

Localização: src/app/containers/

3. Shared Components

Localização: src/app/shared/components/

4. Feature Components

Compliance

Localização: src/app/features/compliance/

5. Views Components

Dashboard

Localização: src/app/views/dashboard/

Base

Localização: src/app/views/base/

🎨 Estrutura de um Componente

Exemplo: CompanydetailsComponent

// companydetails.component.ts
@Component({
  selector: 'app-companydetails',
  templateUrl: './companydetails.component.html',
  styleUrls: ['./companydetails.component.scss']
})
export class CompanydetailsComponent implements OnInit {
  companies: Company[] = [];

  constructor(
    private companyService: CompanyService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.loadCompanies();
  }

  loadCompanies(): void {
    this.companyService.getCompanies().subscribe(
      data => this.companies = data,
      error => console.error(error)
    );
  }
}

Template HTML

<!-- companydetails.component.html -->
<div class="row">
  <div class="col-12">
    <c-card>
      <c-card-header>
        <h3>Empresas</h3>
      </c-card-header>
      <c-card-body>
        <table>
          <tr *ngFor="let company of companies">
            <td>{{ company.name }}</td>
          </tr>
        </table>
      </c-card-body>
    </c-card>
  </div>
</div>

🔄 Comunicação entre Componentes

1. Parent → Child (@Input)

// Parent
<app-child [data]="parentData"></app-child>

// Child
@Input() data: any;

2. Child → Parent (@Output)

// Child
@Output() dataChange = new EventEmitter();

// Parent
<app-child (dataChange)="onDataChange($event)"></app-child>

3. Via Service (Comunicação Cross-Component)

// Service compartilhado
@Injectable({ providedIn: 'root' })
export class SharedService {
  private dataSubject = new BehaviorSubject<any>(null);
  data$ = this.dataSubject.asObservable();
}

// Component A
this.sharedService.dataSubject.next(newData);

// Component B
this.sharedService.data$.subscribe(data => ...);

📊 Resumo de Componentes por Categoria

Última Atualização: 2025-12-01