eCosif — Frontend Angular

🧩 Como Criar Componentes - ecosif-angular

📋 Visão Geral

Este guia explica como criar novos componentes no projeto ecosif-angular seguindo os padrões estabelecidos.

🚀 Criar Componente

Via Angular CLI (Recomendado)

# Criar componente simples
ng generate component pages/nova-pagina

# ou versão curta
ng g c pages/nova-pagina

# Isso criará:
# - nova-pagina.component.ts
# - nova-pagina.component.html
# - nova-pagina.component.scss
# - nova-pagina.component.spec.ts

Criar Componente com Módulo

# Criar componente com módulo próprio
ng generate module pages/nova-pagina --routing
ng generate component pages/nova-pagina

📝 Estrutura do Componente

Componente TypeScript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nova-pagina',
  templateUrl: './nova-pagina.component.html',
  styleUrls: ['./nova-pagina.component.scss']
})
export class NovaPaginaComponent implements OnInit {

  // Propriedades
  data: any[] = [];
  loading = false;

  // Injeção de dependências
  constructor(
    private service: ExampleService,
    private router: Router
  ) {}

  // Lifecycle hooks
  ngOnInit(): void {
    this.loadData();
  }

  // Métodos
  loadData(): void {
    this.loading = true;
    this.service.getData().subscribe(
      data => {
        this.data = data;
        this.loading = false;
      },
      error => {
        console.error(error);
        this.loading = false;
      }
    );
  }
}

Template HTML

<!-- nova-pagina.component.html -->
<div class="row">
  <div class="col-12">
    <c-card>
      <c-card-header>
        <h3>Título da Página</h3>
      </c-card-header>
      <c-card-body>
        <!-- Conteúdo -->
        <div *ngIf="loading">
          Carregando...
        </div>
        <div *ngIf="!loading">
          <!-- Dados -->
        </div>
      </c-card-body>
    </c-card>
  </div>
</div>

Estilos SCSS

// nova-pagina.component.scss
:host {
  display: block;
}

// Estilos específicos do componente

🔌 Criar Service

# Gerar service
ng generate service service/novo-service

# ou
ng g s service/novo-service

Service Padrão

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AppConfigService } from '../core/config/app-config.service';

@Injectable({
  providedIn: 'root'
})
export class NovoService {
  private apiUrl: string;

  constructor(
    private http: HttpClient,
    private appConfig: AppConfigService
  ) {
    this.apiUrl = this.appConfig.apiMasterdata;
  }

  getData(): Observable<any[]> {
    return this.http.get<any[]>(`${this.apiUrl}/api/v1/data`);
  }

  createData(data: any): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/api/v1/data`, data);
  }
}

🛣️ Adicionar Rota

No app-routing.module.ts

import { NovaPaginaComponent } from './pages/nova-pagina/nova-pagina.component';

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      {
        path: 'nova-pagina',
        component: NovaPaginaComponent,
        data: { title: 'Nova Página' }
      }
    ]
  }
];

📦 Adicionar ao Módulo

Se o componente está em um módulo específico:

// pages.module.ts (ou outro módulo)
import { NovaPaginaComponent } from './nova-pagina/nova-pagina.component';

@NgModule({
  declarations: [
    NovaPaginaComponent
  ],
  imports: [
    CommonModule,
    // Outros imports necessários
  ]
})
export class PagesModule { }

🎨 Adicionar ao Menu

Para adicionar ao menu lateral, edite o arquivo de navegação:

// Arquivo de navegação (varia por projeto)
export const navItems = [
  {
    name: 'Nova Página',
    url: '/nova-pagina',
    icon: 'icon-puzzle'
  }
];

✅ Checklist

Ao criar componente:

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