Estrutura

Com o projeto criado, abra-o com seu editor favorito para integrar o Cat UI ao projeto.

1. Aplicando Tema

Inclua o arquivo de estilos em seu projeto pelo arquivo angular.json

angular.json

"build": {
  ...,
  "styles": [
    "./node_modules/@catrx/ui/prebuilt-theme/prebuilt-theme.scss",
    "src/styles.scss"
  ]
}

styles.scss

:root,
main {
  --c-menu: #1E88E5;
  --c-menu-hover: #1976D2;
  --c-menu-active: #1565C0;
  --bg-menu: #E3F2FD;
  --bg-menu-hover: #BBDEFB;
  --bg-menu-active: #90CAF9;
}

Caso queira ver mais sobre estilização e variáveis de cores, clique aqui.

2. Configurando environment

environment.ts

import { CatEnvironmentInterface } from "@catrx/ui/common";

export const environment: CatEnvironmentInterface = {
  production: false,
  storageTokenName: 'cat-crud-example-token'
};

3. Importando módulo principal

app.module.ts

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CatUiModule } from '@catrx/ui';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CatUiModule.forRoot(environment, {
      xlsxConfig: {
        headerBackgroundColor: '#212121',
        headerFontColor: '#f1f1f1',
        normalizeHeader: true        
      }
    }),
    AppRoutingModule
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

4. Criando AppService

app.service.ts

import { Injectable } from '@angular/core';
import { AppConfigMenu, CatAppDecodedToken } from '@catrx/ui';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({ providedIn: 'any' })
export class AppService {
  constructor() {}

  public getMenu(decodedToken: CatAppDecodedToken) {
    return new Observable<AppConfigMenu>((observe) => {
      observe.next({
        modules: [],
      });
    });
  }
}

5. Criando LoginComponent

login.component.ts

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

@Component({
  template: ``,
  styles: [``],
  standalone: true,
  imports: [],
})
export class LoginComponent {
}

6. Configurando AppComponent

app.component.ts

import { Component } from '@angular/core';
import { CatAppService } from '@catrx/ui';
import { LoginComponent } from './login.component';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  appConfig = this.catappService
    .build('PetShop', {
      autoAuth: true,
      jwt: {
        loginComponent: LoginComponent,
      },
      onAuth: (decodedToken) => this.appService.getMenu(decodedToken),
    }, {menuStartState: 'closed', disableCollapseMenuButton: true})
    .setLogotype({
      default: '../assets/logotype.svg',
      negative: '../assets/logotype-negative.svg',
    })
    .enableDarkMode()
    .generate();

  constructor(
    private catappService: CatAppService,
    private appService: AppService
  ) {}
}

app.component.html

<cat-app-container [config]="appConfig">
  <ng-container router-container>
    <router-outlet></router-outlet>
  </ng-container>
</cat-app-container>