PO UI Angular

https://github.com/po-ui/po-angular
Admin
PO UI Angular is a library of UI components for Angular, providing a set of pre-built components to...
Tokens:73,152
Snippets:614
Trust Score:8.8
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### get_guide example

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Example JSON payload for the get_guide tool, requesting the 'getting-started' guide.

```json
{ "guide": "getting-started" }
```

--------------------------------

### Install PO Sync with yarn

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/README.md

Alternative installation using yarn. Run this command to install the @po-ui/ng-sync package.

```bash
yarn add @po-ui/ng-sync
```

--------------------------------

### get_component_examples example

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Example JSON payload for the get_component_examples tool, requesting up to 2 examples for po-button filtered by 'basic'.

```json
{ "slug": "po-button", "example": "basic", "max_examples": 2 }
```

--------------------------------

### get_best_practices example

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Example JSON payload for the get_best_practices tool, requesting the 'getting-started' topic.

```json
{ "topic": "getting-started" }
```

--------------------------------

### Install PO Sync with npm

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/README.md

Alternative installation using npm. Run this command to install the @po-ui/ng-sync package.

```bash
npm install @po-ui/ng-sync
```

--------------------------------

### Start Verdaccio

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Starts the local npm registry at http://localhost:4873.

```bash
> verdaccio
```

--------------------------------

### get_guide

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Returns the complete content of a documentation guide. Use `list_components` with `section` equal to `guides` to discover available guides.

```APIDOC
## get_guide

### Description
Returns the full content of a documentation guide.

### Method
get_guide (tool)

### Endpoint
get_guide

### Parameters
#### Parameters
- **guide** (string) - Required - Guide name, with or without the `.md` extension.

### Request Example
{
  "guide": "getting-started"
}

### Response
#### Success Response (200)
- Full guide content in Markdown.
#### Response Example
{
  "markdown": "# ..."
}
```

--------------------------------

### Include samples with @example and <example> tags

Source: https://github.com/po-ui/po-angular/blob/master/HOW_TO_DOCUMENT.md

Samples are included in the documentation using the @example tag and the <example></example> element. Each file is referenced with the <file> tag inside the example.

```typescript
/**
 * @docExtends PoButtonBaseComponent
 *
 * @example
 *
 * <example name='po-button' title='Tipos e tamanhos do po-button' >
 *  <file name='sample-po-button.component.html'> </file>
 *  <file name='sample-po-button.component.ts'> </file>
 * </example>
 *
 * <example name='po-button-click' title='Eventos de click e botão desabilitado'>
 *  <file name='sample-po-button-click.component.html'> </file>
 *  <file name='sample-po-button-click.component.ts'> </file>
 * </example>
 *
 */
```

--------------------------------

### Install PO Sync with schematic

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/README.md

Recommended installation method using the Angular schematic. Run this command in your Angular project to add the @po-ui/ng-sync library.

```bash
ng add @po-ui/ng-sync
```

--------------------------------

### Run @po-ui/mcp with npx

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Command to start the MCP server without global installation. The server uses stdio transport; the MCP client typically starts and stops the process.

```bash
npx -y @po-ui/mcp
```

--------------------------------

### Run dev server with ng serve

Source: https://github.com/po-ui/po-angular/blob/master/README.md

Start the development server to run the project. Afterwards, open a browser and go to http://localhost:4200 to see the application.

```bash
ng serve
```

--------------------------------

### get_component_examples

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Returns official examples of a component, fetched from the PO Angular repository. Includes filter by example name and maximum number of results.

```APIDOC
## get_component_examples

### Description
Returns official examples of a component, fetched directly from the `po-ui/po-angular` repository. Each example includes the files that compose it (TypeScript, HTML, styles, and configuration), with content and link to the source code.

### Method
get_component_examples (tool)

### Endpoint
get_component_examples

### Parameters
#### Parameters
- **slug** (string) - Required - Identifier of the component. Accepts slug (`po-button`), selector (`<po-button>`), or class name (`PoButtonComponent`).
- **example** (string) - Optional - Filter by example name, without distinguishing uppercase and lowercase. Examples: `basic`, `labs`.
- **max_examples** (integer, 1 to 5) - Optional - Maximum number of examples. Default is `3`.

### Request Example
{
  "slug": "po-button",
  "example": "basic",
  "max_examples": 2
}

### Response
#### Success Response (200)
- List of examples with files and source links.
#### Response Example
{
  "examples": [
    {
      "name": "basic",
      "files": [
        {
          "name": "example.component.ts",
          "content": "...",
          "source_link": "https://github.com/po-ui/po-angular/..."
        }
      ]
    }
  ]
}
```

--------------------------------

### get_component_docs example

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Example JSON payload for the get_component_docs tool, using a class name as slug.

```json
{ "slug": "PoButtonComponent" }
```

--------------------------------

### Install PO Storage with yarn

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/README.md

Alternative installation command using yarn for the @po-ui/ng-storage package.

```bash
yarn add @po-ui/ng-storage
```

--------------------------------

### Create new Angular project with ng new --skip-install

Source: https://github.com/po-ui/po-angular/blob/master/README.md

Create a new Angular project named my-po-project without installing dependencies. The --skip-install flag prevents automatic dependency installation, which is useful for later manual setup.

```bash
ng new my-po-project --skip-install
```

--------------------------------

### Install PO Storage with npm

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/README.md

Use this command to install the @po-ui/ng-storage package via npm.

```bash
npm install @po-ui/ng-storage
```

--------------------------------

### list_components example

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Example JSON payload for the list_components tool, filtering components by 'table'.

```json
{ "section": "components", "filter": "table" }
```

--------------------------------

### Add @po-ui/ng-components with ng add

Source: https://github.com/po-ui/po-angular/blob/master/README.md

Add the @po-ui/ng-components package to an existing project. The command automatically configures the theme, installs the Po getting-started guide, imports the HttpClientModule, and prompts about including an initial structure with a sidebar, page, and toolbar.

```bash
ng add @po-ui/ng-components
```

--------------------------------

### search_docs example

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Example JSON payload for the search_docs tool, searching for 'lazy load' with a maximum of 5 results.

```json
{ "query": "lazy load", "max_results": 5 }
```

--------------------------------

### Install PO Code Editor with npm

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/README.md

Use this command to install the @po-ui/ng-code-editor package via npm. This is the primary installation method.

```bash
npm install @po-ui/ng-code-editor
```

--------------------------------

### Install PO Code Editor with yarn

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/README.md

Alternative installation command using yarn instead of npm. Choose this if you prefer the yarn package manager.

```bash
yarn add @po-ui/ng-code-editor
```

--------------------------------

### Property order example for PO components

Source: https://github.com/po-ui/po-angular/blob/master/STYLEGUIDE.md

Illustrates the recommended order of properties for PO components: class, name, ngModel, properties without bind, properties with bind, and events. Includes examples for po-button and po-input.

```html
<po-button
class="po-sm-12"
[p-disabled]="properties.includes('disabled')"
[p-icon]="icon"
[p-label]="label"
[p-type]="type"
(p-click)="buttonClick()">
```

```html
<po-input
class="po-md-6"
name="label"
[(ngModel)]="label"
p-clean
p-placeholder="Enter a label for the button"
p-required
[p-label]="labelTitle"
(p-change)="change()">
```

--------------------------------

### Install Angular CLI with npm

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/development-flow.md

Install the Angular CLI globally using npm. Requires Node.js version 18.13.0 or above.

```bash
npm i -g @angular/cli
```

--------------------------------

### Essential npm commands for PO UI Angular

Source: https://github.com/po-ui/po-angular/blob/master/AGENTS.md

Essential npm commands for the PO UI Angular repository. Use npm start to launch the development server, npm test to run all tests, npm run test:ui for UI library tests, npm run lint for linting, npm run format:check to verify formatting, and npm run build to build all libraries.

```bash
npm start              # Iniciar servidor de desenvolvimento
npm test               # Executar todos os testes
npm run test:ui        # Testes da biblioteca UI
npm run lint           # Executar linter
npm run format:check   # Verificar formatação
npm run build          # Build de todas as bibliotecas
```

--------------------------------

### Install project dependencies with npm or yarn

Source: https://github.com/po-ui/po-angular/blob/master/README.md

Install project dependencies using either npm or yarn. With npm version 7, dependency version errors may occur; use 'npm install --legacy-peer-deps' in that case.

```bash
npm install
```

```bash
yarn install
```

--------------------------------

### Install Angular CLI with yarn

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/development-flow.md

Install the Angular CLI globally using yarn. Requires Node.js version 18.13.0 or above.

```bash
yarn global add @angular/cli
```

--------------------------------

### Generate ng-add schematic

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/schematics/README.md

Runs the ng-add schematic to install and configure the sync package.

```bash
> ng generate @po-ui/ng-sync:ng-add
```

--------------------------------

### Add @po-ui/ng-templates package

Source: https://github.com/po-ui/po-angular/blob/master/README.md

Installs the PO UI templates package and configures PoTemplatesModules in app.module. Use this command to enable template components such as po-page-login, po-modal-password-recovery, po-page-blocked-user, and po-page-dynamic-table.

```bash
ng add @po-ui/ng-templates
```

--------------------------------

### Generate ng-add schematic

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/schematics/README.md

Installs the po-storage package and adds PoStorageModule to app.module.ts.

```bash
> ng generate @po-ui/ng-storage:ng-add
```

--------------------------------

### list_components

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Lists components, directives, services, interfaces, enums, and guides available in the PO UI index. It supports filtering by section and name/description.

```APIDOC
## list_components

### Description
Lists components, directives, services, interfaces, enums, and guides available in the PO UI index.

### Method
list_components (tool)

### Endpoint
list_components

### Parameters
#### Parameters
- **section** ("components" | "services" | "interfaces" | "enums" | "guides" | "all") - Optional - Section consulted. Default is `all`.
- **filter** (string) - Optional - Text searched in the name or description, without distinguishing uppercase and lowercase.

### Request Example
{
  "section": "components",
  "filter": "table"
}

### Response
#### Success Response (200)
- List of items matching the section and filter.
#### Response Example
{
  "results": [
    {
      "name": "po-button",
      "type": "component",
      "description": "Button component"
    }
  ]
}
```

--------------------------------

### Install Angular CLI 21 globally with npm or yarn

Source: https://github.com/po-ui/po-angular/blob/master/README.md

Install the Angular CLI globally using either npm or yarn. The required Angular CLI version is 21. Choose one of these alternatives based on your preferred package manager.

```bash
npm i -g @angular/cli@21
```

```bash
yarn global add @angular/cli@21
```

--------------------------------

### Class structure: blank lines before properties and methods

Source: https://github.com/po-ui/po-angular/blob/master/STYLEGUIDE.md

Demonstrates the required blank lines before property/method declarations and at the end of the class, as shown in the SamplepoButtonBasicComponent example.

```typescript
export class SamplepoButtonBasicComponent {
// LINHA EM BRANCO
text: string;

onClick() {
alert('po Button!');
}
// LINHA EM BRANCO
}
```

--------------------------------

### Generate ng-add schematic

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Installs the po-code-editor package and adds PoCodeEditorModule to app.module.ts.

```bash
> ng generate @po-ui/ng-code-editor:ng-add
```

--------------------------------

### Build and serve the portal

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/development-flow.md

Build the portal and serve it locally to preview code and documentation changes. The browser will open at http://localhost:4200/.

```bash
npm run build:portal && ng serve portal
```

--------------------------------

### GET /api/users?order=name,-age,surname

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/api.md

Orders the collection results by the specified fields. Fields preceded by a minus sign are sorted descending, otherwise ascending.

```APIDOC
## GET /api/users?order=name,-age,surname

### Description
Orders the collection results by the specified fields. Fields preceded by a minus sign are sorted descending, otherwise ascending.

### Method
GET

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **order** (string) - Required - Comma-separated list of fields to sort by. Fields preceded by '-' are sorted descending, others ascending.

### Request Example
GET https://example.com.br/api/users?order=name,-age,surname

### Response
#### Success Response (200)
Returns the list of users sorted according to the order parameter.

#### Response Example
(No response example provided in the source.)
```

--------------------------------

### Build and publish all packages

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/schematics/README.md

Builds and publishes all packages to the local registry in one command.

```bash
> npm run build:schematics && npm run build:storage && npm run build:sync && npm run publish:sync:local && npm run publish:storage:local && npm run publish:schematics:local
```

--------------------------------

### Build schematics, storage, and sync packages

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/schematics/README.md

Builds the schematics, storage, and sync packages.

```bash
> npm run build:schematics
> npm run build:storage
> npm run build:sync
```

--------------------------------

### Comandos de instalação, build e teste do MCP

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Execute estes comandos na raiz do repositório para instalar dependências, compilar o projeto MCP e rodar seus testes.

```bash
npm install
npm run build:mcp
npm run test:mcp
```

--------------------------------

### Build storage project

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/schematics/README.md

Build the po-storage project before linking.

```bash
> npm run build:storage
```

--------------------------------

### Instalar po-migration globalmente

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-thf-to-po-ui.md

Instala o pacote po-migration globalmente via npm para uso em qualquer projeto.

```bash
npm install -g po-migration
```

--------------------------------

### Build and publish storage locally

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/schematics/README.md

Builds the storage package and publishes it to the local registry.

```bash
> npm run build:storage && npm run publish:storage:local
```

--------------------------------

### Instalar Ionic CLI versão 7

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Pré-requisito para o tutorial. Instala globalmente o Ionic CLI na versão 7.

```shell
npm install -g @ionic/cli@7
```

--------------------------------

### Instalar Angular CLI versão 21

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Pré-requisito para o tutorial. Instala globalmente o Angular CLI na versão 21.

```shell
npm install -g @angular/cli@21
```

--------------------------------

### Sincronização manual com PoSyncService.sync()

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Chama o método sync() para ativar manualmente a sincronização, com callbacks de sucesso e erro.

```typescript
this.poSync.sync().then(() => {
  // Sincronização concluída
}).catch(() => {
  // Erro durante a sincronização
});
```

--------------------------------

### Instalar dependências com npm

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Instala as dependências do projeto usando npm, após verificar as versões compatíveis.

```bash
npm install
```

--------------------------------

### Instalar Angular CLI com npm

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Instala o Angular CLI globalmente via npm. Necessário para criar e gerenciar projetos Angular.

```bash
npm i -g @angular/cli@21
```

--------------------------------

### Example conference schema definition

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Example TypeScript schema definition for a 'conference' entity, implementing the PoSyncSchema interface with endpoints and field configuration.

```typescript
import { PoSyncSchema } from '@po-ui/ng-sync';

const conferenceSchema: PoSyncSchema = {
  // Endpoint para o método GET
  getUrlApi: 'https://po-sample-conference.onrender.com/conferences',
  diffUrlApi: 'https://po-sample-conference.onrender.com/conferences/diff',
  deletedField: 'isDeleted',
  fields: [ 'id', 'title', 'date', 'location', 'description' ],
  idField: 'id',
  name: 'conference',
  pageSize: 1
};
```

--------------------------------

### Instalar @po-ui/ng-sync

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui-v2.md

Comando para instalar o pacote @po-ui/ng-sync versão 2, necessário para executar a migração.

```bash
npm i --save @po-ui/ng-sync@2
```

--------------------------------

### Build das modificações: npm run build, build:portal e ng serve portal

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/development-flow.md

Comandos para testar as modificações no Portal PO UI após concluir as alterações e atualizar a documentação. Execute-os na ordem apresentada.

```bash
npm run build
npm run build:portal
ng serve portal
```

--------------------------------

### Instalar @po-ui/ng-components versão 2

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui-v2.md

Instala o pacote @po-ui/ng-components na versão 2, necessário para executar o ng update de migração.

```bash
npm i --save @po-ui/ng-components@2
```

--------------------------------

### Empacotar e publicar para teste local

Source: https://github.com/po-ui/po-angular/blob/master/projects/ui/schematics/README.md

Constrói e publica os pacotes locais após incrementar a versão e ter o registry local em execução.

```bash
> npm run build:ui && npm run publish:ui:local
```

--------------------------------

### Add po-code-editor to Angular project

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Installs the po-code-editor package in your Angular project using ng add.

```bash
> ng add @po-ui/ng-code-editor
```

--------------------------------

### GET /api/users?name=john&surname=doe

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/api.md

Filters the collection results by the specified field-value pairs. Each filter is sent as a query parameter in the format property=value.

```APIDOC
## GET /api/users?name=john&surname=doe

### Description
Filters the collection results by the specified field-value pairs. Each filter is sent as a query parameter in the format property=value.

### Method
GET

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **name** (string) - Required - Filter by the name field.
- **surname** (string) - Required - Filter by the surname field.

### Request Example
GET https://example.com.br/api/users?name=john&surname=doe

### Response
#### Success Response (200)
Returns the filtered list of users.

#### Response Example
(No response example provided in the source.)
```

--------------------------------

### Instalar Angular CLI com yarn

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Instala o Angular CLI globalmente via yarn, alternativa ao npm.

```bash
yarn global add @angular/cli@21
```

--------------------------------

### Build schematics, storage, and sync packages (npm link)

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/schematics/README.md

Builds the schematics, storage, and sync packages for npm link testing.

```bash
> npm run build:schematics 
> npm run build:storage 
> npm run build:sync
```

--------------------------------

### GET /api/users/?page=4&pageSize=10

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/api.md

Paginates the collection results using the page and pageSize parameters. The response includes a hasNext attribute indicating if there is a next page.

```APIDOC
## GET /api/users/?page=4&pageSize=10

### Description
Paginates the collection results using the page and pageSize parameters. The response includes a hasNext attribute indicating if there is a next page.

### Method
GET

### Endpoint
/api/users/

### Parameters
#### Query Parameters
- **page** (integer) - Required - The page number to retrieve (greater than zero).
- **pageSize** (integer) - Required - The number of records per page (greater than zero).

### Request Example
GET https://example.com.br/api/users/?page=4&pageSize=10

### Response
#### Success Response (200)
Returns the requested page of records. The response includes a `hasNext` attribute indicating if there is a next page.

#### Response Example
(No response example provided in the source.)
```

--------------------------------

### Instalar @angular/build com pnpm

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Instala o pacote @angular/build usando pnpm, alternativa ao npm.

```bash
pnpm install -D @angular/build
```

--------------------------------

### Exibir ajuda do po-migration

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-thf-to-po-ui.md

Mostra a documentação completa do pacote po-migration.

```bash
po-migration --help
```

--------------------------------

### Modelo de propriedade com getter e setter

Source: https://github.com/po-ui/po-angular/blob/master/STYLEGUIDE.md

Padrão para declarar propriedades com getter e setter em componentes PO UI. Use underscore para a variável privada, declare o set antes do get, e para propriedades booleanas utilize o decorator @InputBoolean.

```typescript
private _prop: type = ;

/** Documentação */
@Input(’p-prop’) set prop(value: type) {
  this._prop = value;
}

get prop(): type {
  return this._prop;
}
```

--------------------------------

### Atualizar Angular para a versão 9

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui-v2.md

Comando para atualizar o Angular CLI e o core para a versão 9, necessário antes de migrar o PO UI. Pode ser preciso usar a flag --force se houver dependências incompatíveis com a versão 8.

```bash
ng update @angular/cli@9 @angular/core@9
```

--------------------------------

### Configure @po-ui/mcp in Continue (.continue/mcpServers/po-ui.yaml)

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

YAML configuration to add the PO UI MCP server to Continue. The MCP tools become available in Agent mode.

```yaml
name: PO UI MCP
version: 0.0.1
schema: v1
mcpServers:
  - name: PO UI
    type: stdio
    command: npx
    args:
      - -y
      - "@po-ui/mcp"
```

--------------------------------

### Basic usage of PO input with icon

Source: https://github.com/po-ui/po-angular/blob/master/projects/portal/src/app/icons/icons.component.html

Shows how to use the 'p-icon' property with an icon class from the Animalia Icons library in a PO input component.

```html
<po-input p-icon="an an-user" p-label="PO input"></po-input>
```

--------------------------------

### Exemplo de atualização do Angular CLI e Core

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui.md

Exemplo de execução do comando de atualização do Angular para a versão 21.

```bash
ng update @angular/cli@21 @angular/core@21 --force
```

--------------------------------

### Configuração inicial do PO Sync

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Configura o PO Sync com o tipo de conexão ethernet e prepara os schemas. Após a promessa, chama poSync.sync() para sincronizar os dados.

```typescript
const config: PoSyncConfig = {
  type: PoNetworkType.ethernet
};
const schemas = [conferenceSchema];

this.poSync.prepare(schemas, config).then(() => {
  this.poSync.sync();
  ...
});
```

--------------------------------

### get_best_practices

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

Returns a Markdown document with official PO UI best practices for a given topic, including title and source link.

```APIDOC
## get_best_practices

### Description
Returns, in Markdown, an official good practices document from PO UI, along with the title and source link.

### Method
get_best_practices (tool)

### Endpoint
get_best_practices

### Parameters
#### Parameters
- **topic** ("contributing" | "development-flow" | "getting-started" | "theme-service") - Required - Theme of the recommendations.

### Request Example
{
  "topic": "getting-started"
}

### Response
#### Success Response (200)
- Markdown document with best practices.
#### Response Example
{
  "title": "Getting Started",
  "markdown": "# ...",
  "source": "https://..."
}
```

--------------------------------

### Migração completa com --all

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-thf-to-po-ui.md

Atualiza todas as palavras do projeto que contêm 'thf', 't-' ou 'totvs'. Cuidado: pode alterar nomes de arquivos.

```bash
po-migration start --all
```

--------------------------------

### Dependências compatíveis com PO UI

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Lista de dependências e versões compatíveis com o PO UI e Angular, que devem ser verificadas no package.json do projeto.

```json
  "dependencies": {
    "@angular/animations": "~21.2.17",
    "@angular/common": "~21.2.17",
    "@angular/compiler": "~21.2.17",
    "@angular/core": "~21.2.17",
    "@angular/forms": "~21.2.17",
    "@angular/platform-browser": "~21.2.17",
    "@angular/platform-browser-dynamic": "~21.2.17",
    "@angular/router": "~21.2.17",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0"
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~21.2.17",
    "@angular-devkit/schematics": "~21.2.17",
    "@angular/cli": "~21.2.17",
    "@angular/compiler-cli": "~21.2.17",
    ...
    "typescript": "~5.9.3"
  }
```

--------------------------------

### Instalar dependências com yarn

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Instala as dependências do projeto usando yarn, alternativa ao npm.

```bash
yarn install
```

--------------------------------

### Agora: Property bind com bind (po-stepper)

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui-v2.md

Exemplo atualizado que usa .bind(this) na função passada via property bind, conforme exigido após a depreciação.

```html
<po-stepper>
  <po-step p-label="Personal" [p-can-active-next-step]="canActiveNextStep.bind(this)">
  </po-step>
</po-stepper>
```

--------------------------------

### Atualizar Angular CLI e Core

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui.md

Executa a atualização do Angular CLI e do Angular Core para a versão especificada. Use a flag --force para sobrescrever alterações locais.

```bash
ng update @angular/cli@<version> @angular/core@<version> --force
```

--------------------------------

### Build code editor

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Build the po-code-editor project before linking.

```bash
> npm run build:code-editor
```

--------------------------------

### Configure @po-ui/mcp in VS Code with GitHub Copilot (.vscode/mcp.json)

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

JSON configuration to add the PO UI MCP server to VS Code via the MCP: Add Server command or the .vscode/mcp.json file.

```json
{
  "servers": {
    "po-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@po-ui/mcp"]
    }
  }
}
```

--------------------------------

### Build and publish packages locally

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Builds the po-angular packages and publishes them to the local Verdaccio registry.

```bash
> npm run build && npm run publish:local
```

--------------------------------

### Dependências compatíveis no package.json

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Exemplo das dependências e versões compatíveis que devem ser conferidas e ajustadas no arquivo package.json do projeto.

```json
  ...
  "dependencies": {
    "@angular/animations": "~21.2.17",
    "@angular/common": "~21.2.17",
    "@angular/compiler": "~21.2.17",
    "@angular/core": "~21.2.17",
    "@angular/forms": "~21.2.17",
    "@angular/platform-browser": "~21.2.17",
    "@angular/platform-browser-dynamic": "~21.2.17",
    "@angular/router": "~21.2.17",
    "@capacitor/app": "8.0.0",
    "@capacitor/core": "8.0.1",
    "@capacitor/haptics": "8.0.0",
    "@capacitor/keyboard": "8.0.0",
    "@capacitor/splash-screen": "8.0.0",
    "@capacitor/status-bar": "8.0.0",
    "@ionic/angular": "~8.7.16",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/schematics": "~21.2.17",
    ...
    "@angular/cli": "~21.2.17",
    "@angular/compiler-cli": "~21.2.17",
    "@angular/language-service": "~21.2.17",
    "@capacitor/cli": "8.0.1",
    "@ionic/angular-toolkit": "^12.0.0",
    ...
    "typescript": "~5.9.3"
  },
  ...
```

--------------------------------

### Add user to Verdaccio

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Creates a user on the local registry.

```bash
npm adduser --registry http://localhost:4873
```

--------------------------------

### Atualizar Angular para versão 21

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Atualiza o projeto para Angular 21 para garantir compatibilidade com o PO UI.

```shell
ng update @angular/core@21 @angular/cli@21
```

--------------------------------

### Instalar @angular/build com npm

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/getting-started.md

Instala o pacote @angular/build como dependência de desenvolvimento para resolver o erro do builder.

```bash
npm install -D @angular/build
```

--------------------------------

### Carga inicial com PoSyncService.loadData()

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Substitui this.poSync.sync() por uma chamada a this.poSync.loadData() dentro de uma condição que verifica se é a primeira vez. Deve ser chamado apenas uma vez antes do primeiro sincronismo.

```typescript
const config: PoSyncConfig = {
  type: PoNetworkType.ethernet,
  period: 30
};

const schemas = [conferenceSchema];

this.poSync.prepare(schemas, config).then(() => {
  
  // Implementação adicionada
  if(<condicao>) {
    this.poSync.loadData();
  }

});
```

--------------------------------

### Build schematics

Source: https://github.com/po-ui/po-angular/blob/master/projects/code-editor/schematics/README.md

Run this command in the repository root to build the schematics. It creates the dist/ng-schematics folder.

```bash
~ <caminho_do_repositorio>/po-angular
> npm run build:schematics
```

--------------------------------

### Publish packages to local registry

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/schematics/README.md

Publishes the sync, storage, and schematics packages to the local registry.

```bash
> npm run publish:sync:local
> npm run publish:storage:local
> npm run publish:schematics:local
```

--------------------------------

### Run unit tests

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/development-flow.md

Run the unit tests for the project. Tests are mandatory for all modifications.

```bash
npm run test
```

--------------------------------

### Exemplo de branch para ISSUE do Jira

Source: https://github.com/po-ui/po-angular/blob/master/CONTRIBUTING.md

Exemplo de criação de branch quando a ISSUE é gerada no Jira, usando o componente po-button e o código DTHFUI-222.

```shell
git checkout -b po-button/DTHFUI-222
```

--------------------------------

### Instalar pacote Schematics do Angular

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui.md

Instala o pacote @angular-devkit/schematics como dependência de desenvolvimento para o script de atualização do PO UI funcionar corretamente em projetos Angular@20.

```bash
npm install @angular-devkit/schematics --save-dev
```

--------------------------------

### Buscar registros com PoEntity.find() e PoQueryBuilder.exec()

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Busca todos os registros do modelo. O método find() retorna um PoQueryBuilder, e exec() conclui a busca retornando os registros.

```typescript
this.conferences = await this.conferenceModel.find().exec();
```

--------------------------------

### Configure @po-ui/mcp in Kiro (.kiro/settings/mcp.json)

Source: https://github.com/po-ui/po-angular/blob/master/projects/mcp/README.md

JSON configuration to add the PO UI MCP server to Kiro. After saving, Kiro reconnects automatically; confirm in the MCP Servers panel.

```json
{
  "mcpServers": {
    "po-ui": {
      "command": "npx",
      "args": ["-y", "@po-ui/mcp"],
      "disabled": false
    }
  }
}
```

--------------------------------

### Gerenciamento de Tamanhos com setA11yDefaultSizeSmall() e getDefaultSize()

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/theme-service.md

Habilita tamanhos pequenos para acessibilidade (padrão AAA) e verifica a configuração atual de tamanho padrão.

```typescript
  // Habilitar tamanhos para small
  this.themeService.setA11yDefaultSizeSmall(true);

  // Verificar configuração atual
  const currentSize = this.poThemeService.getDefaultSize();
```

--------------------------------

### Run ng add @po-ui/ng-sync

Source: https://github.com/po-ui/po-angular/blob/master/projects/sync/schematics/README.md

Runs the ng add schematic to add the sync package to an Angular project.

```bash
> ng add @po-ui/ng-sync
```

--------------------------------

### Atualizar projeto Angular com ng update

Source: https://github.com/po-ui/po-angular/blob/master/projects/ui/schematics/README.md

Executa a atualização automática do PO UI em um projeto Angular usando o Angular CLI.

```bash
> ng update @po-ui/ng-components --next
```

--------------------------------

### Reset para Tema Padrão com resetBaseTheme()

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/theme-service.md

Método que restaura todos os valores do tema para o tema base configurado. Deve ser chamado em qualquer componente ou serviço.

```typescript
// Em qualquer componente/service:
resetarTema() {
  this.poThemeService.resetBaseTheme();
}
```

--------------------------------

### Notificação pós-sincronização com PoSyncService.onSync()

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Exemplo do guia 'Começando com o PO Sync' mostrando inscrição no onSync() dentro do constructor para recarregar dados após cada sincronização.

```typescript
constructor(public navCtrl: NavController, private poSync: PoSyncService) {
  // Deve chamar o método loadHomePage() sempre que acontecer uma sincronização
  this.poSync.onSync().subscribe(() => this.loadHomePage());
}

async loadHomePage() {
  this.conference = await this.poSync.getModel('conference').findOne().exec();
}
```

--------------------------------

### Inserir requisição HTTP customizada com insertHttpCommand

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Exemplo de como criar um objeto PoHttpRequestData e usar o método insertHttpCommand() para adicionar uma requisição HTTP à fila de eventos. O método retorna uma promessa que fornece o ID do evento.

```typescript
const poHttpRequestData: PoHttpRequestData = {
  // URL que será enviada na requisição
  url: 'http://<url>',

  // Método HTTP que será utilizado
  method: PoHttpRequestType.POST,

  // Corpo da requisição
  body: { record: 'example' }
};

this.poSync.insertHttpCommand(poHttpRequestData).then(commandId => {
  // Item adicionado na fila de eventos e retornado o ID do evento em "commandId"
});
```

--------------------------------

### Antes: Property bind sem bind (po-stepper)

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui-v2.md

Exemplo anterior à depreciação, onde a função era passada via property bind sem .bind(this). Este comportamento foi depreciado.

```html
<po-stepper>
  <po-step p-label="Personal" [p-can-active-next-step]="canActiveNextStep">
  </po-step>
</po-stepper>
```

--------------------------------

### Navegar para a pasta do aplicativo

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Entra no diretório do projeto criado.

```shell
cd po-sync-getting-started
```

--------------------------------

### Exemplo de descrição com @description

Source: https://github.com/po-ui/po-angular/blob/master/HOW_TO_DOCUMENT.md

Use a tag @description para inserir uma descrição clara e objetiva do componente, módulo ou serviço. O texto deve indicar do que se trata, como usar, onde é utilizado e onde não é utilizado.

```typescript
/**
 * @description
 *
 * Escreva descrições claras, concisas e objetivas de forma que o leitor saiba identificar:
 * - Do que se trata;
 * - Como usar;
 * - Onde é utilizado;
 * - Onde não é utilizado.
 */
```

--------------------------------

### Add user to local registry

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/schematics/README.md

Registers a user with the local npm registry.

```bash
> npm adduser --registry http://localhost:4873
```

--------------------------------

### Configurar PoStorageModule com lokijs para envio de arquivos

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Exemplo de configuração do PoStorageModule no app.module.ts, recomendando o uso prioritário do lokijs para maior capacidade de armazenamento ao enviar arquivos.

```typescript
...
@NgModule({
  ...
  imports: [
    ...
    PoStorageModule.forRoot({ // import do módulo Po Storage,
      name: 'mystorage',
      storeName: '_mystore',
      driverOrder: ['lokijs', 'indexeddb', 'localstorage', 'websql']
    }),
    PoSyncModule, // import do módulo Po Sync
  ],
  ...
})
export class AppModule {}
```

--------------------------------

### Exemplo de requisição com paginação (page e pageSize)

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/api.md

Envia os parâmetros page e pageSize para paginar resultados. O exemplo solicita a quarta página com 10 registros por página (registros 31 a 40).

```http
GET https://example.com.br/api/users/?page=4&pageSize=10
```

--------------------------------

### Estrutura de resposta padrão do PO UI

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Formato de resposta esperado pelo PO Sync, com campos hasNext, items e po_sync_date.

```javascript
{
  "hasNext": boolean,
  "items": [],
  "po_sync_date": date
}
```

--------------------------------

### Cursor MCP configuration (.cursor/mcp.json)

Source: https://github.com/po-ui/po-angular/blob/master/projects/portal/src/app/documentation/ia-tools-mcp/ia-tools-mcp.component.html

Configuration for the PO UI MCP server in Cursor. Place this in .cursor/mcp.json or global settings.

```json
{
  "mcpServers": {
    "po-ui": {
      "command": "npx",
      "args": ["-y", "@po-ui/mcp"]
    }
  }
}
```

--------------------------------

### Iniciar migração padrão

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-thf-to-po-ui.md

Executa a migração padrão do THF para o PO UI, alterando apenas palavras-chave do THF.

```bash
po-migration start
```

--------------------------------

### Método hasNext() isolado

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Trecho do método hasNext() que verifica se existe próxima página usando a propriedade next da resposta.

```typescript
hasNext(): boolean {
  return !!this.data.next;
}
```

--------------------------------

### Labs sample structure: restore function and button

Source: https://github.com/po-ui/po-angular/blob/master/STYLEGUIDE.md

Shows the required structure for Labs samples: a restore button and the restore() method called in ngOnInit. The button uses type 'default' and is placed at the end of the sample.

```html
<po-button
class="po-md-3"
p-label="Sample Restore"
(p-click)="restore()">
```

```typescript
ngOnInit() {
this.restore();
}

restore() {
this.src = 'http://lorempixel.com/144/144/cats';
this.size = undefined;
}
```

--------------------------------

### Estrutura de resposta de API não padronizada

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Exemplo de resposta de API que não segue o padrão PO UI, com campos next, data e sync_date.

```typescript
{
  "next": string,
  "data": [],
  "sync_date": date
}
```

--------------------------------

### Configure po-sync prepare in app.component.ts (NgModule)

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Replaces the content of src/app/app.component.ts to configure po-sync using PoSyncService.prepare() with a PoSyncConfig of type PoNetworkType.wifi and the conferenceSchema. After prepare resolves, it calls PoSyncService.sync().

```typescript
import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar } from '@capacitor/status-bar';
import { PoNetworkType, PoSyncConfig, PoSyncService } from '@po-ui/ng-sync';
import { conferenceSchema } from './home/conference-schema.constants';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: false
})
export class AppComponent {
  constructor(private platform: Platform, private poSync: PoSyncService) {
    this.initializeApp();
  }

  async initializeApp() {
    await this.platform.ready();
    if (Capacitor.isNativePlatform()) {
      StatusBar.setOverlaysWebView({ overlay: true });
    }
    await SplashScreen.hide();

    this.initSync();
  }

  initSync() {
    const config: PoSyncConfig = {
      type: PoNetworkType.wifi,
    };
    const schemas = [conferenceSchema];
    this.poSync.prepare(schemas, config).then(() => {
      this.poSync.sync();
    });
  }
}
```

--------------------------------

### Agora: Função em array com bind (po-page-default)

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/migration-poui-v2.md

Exemplo atualizado que usa .bind(this) na função dentro do array de ações, conforme exigido após a depreciação.

```html
<po-page-default p-title="Página" [p-actions]="actions">
   ...
</po-page-default>
```

```typescript
export class ExampleFunction () {

  actions: Array<PoPageAction> = [
    { label: 'Adicionar', action: this.add.bind(this) }
  ]

  add() {
    ...
  }
}
```

--------------------------------

### Criar aplicação Ionic com template blank

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-get-started.md

Cria um novo projeto Ionic usando o template blank. Se perguntado, escolha Angular como framework.

```shell
ionic start po-sync-getting-started blank
```

--------------------------------

### Inscrever-se em PoSyncService.getResponses() para monitorar o consumo da fila

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Exemplo básico de inscrição no método getResponses() do PoSyncService. O retorno é um objeto do tipo PoSyncResponse contendo informações do item consumido da fila de eventos.

```typescript
this.poSync.getResponses().subscribe(poSyncResponse => {
  // Foi consumido um item da fila de eventos.
});
```

--------------------------------

### Enviar arquivo com insertHttpCommand e multipart/form-data

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Exemplo de como enviar um arquivo (File) para o servidor usando insertHttpCommand, informando o rawFile no body e a propriedade formField. Se formField não for informado, o valor padrão é 'file'.

```typescript
public insertFileHttpCommand(file: File) {
  const requestData: PoHttpRequestData = {
    url: 'http://my-server/api/v1/upload';,
    method: PoHttpRequestType.POST,
    headers: Array<PoHttpHeaderOption> = [{ name: 'Authorization', value: 'Basic ' + btoa('13' + ':' + '13') }],
    body: file.rawFile,
    formField: 'files',
  };

  this.poSync.insertHttpCommand(requestData).then(commandId => {
    // Evento HTTP adicionado na fila de eventos e retornado o ID do evento em "commandId"
  });
}
```

--------------------------------

### Generate a Schematic with ng generate

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/schematics.md

Use this command to generate a component. Replace 'package' with the package name and 'schematic-name' with the desired component. Add --help to see available options.

```bash
ng generate <package>:<schematic-name>
```

--------------------------------

### Configurar PoSyncConfig com dataTransform

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/sync-fundamentals.md

Passo 3: criar instância de MyDataTransform e incluí-la na propriedade dataTransform do PoSyncConfig usado no prepare().

```typescript
const config: PoSyncConfig = {
  type: PoNetworkType.ethernet,
  period: 30,
  // Instância da classe MyDataTransform
  dataTransform: new MyDataTransform()
};

const schemas = [conferenceSchema];

this.poSync.prepare(schemas, config).then(() => {
  ...
});
```

--------------------------------

### Estrutura completa de mensagens de erro com detalhes

Source: https://github.com/po-ui/po-angular/blob/master/docs/guides/api.md

Exemplo de resposta de erro incluindo campos opcionais como helpUrl, type e uma lista recursiva de detalhes.

```json
{
    code: "Código identificador do erro",
    type: "error"
    message: "Literal no idioma da requisição descrevendo o erro para o cliente",
    detailedMessage: "Mensagem técnica e mais detalhada do erro",
    helpUrl: "link para a documentação do error",
    details [
        {
            code: "Código identificador do erro",
            message: "Literal no idioma da requisição descrevendo o erro para o cliente",
            detailedMessage: "Mensagem técnica e mais detalhada do erro"
        },
        {
            code: "Código identificador do erro",
            message: "Literal no idioma da requisição descrevendo o erro para o cliente",
            detailedMessage: "Mensagem técnica e mais detalhada do erro"
        },
        {
            code: "Código identificador do erro",
            message: "Literal no idioma da requisição descrevendo o erro para o cliente",
            detailedMessage: "Mensagem técnica e mais detalhada do erro"
        }
    ]
}
```

--------------------------------

### Link dist/ng-storage

Source: https://github.com/po-ui/po-angular/blob/master/projects/storage/schematics/README.md

Create a symbolic link to the built package.

```bash
> npm link dist/ng-storage
```

--------------------------------

### Atualizar branch master com git pull

Source: https://github.com/po-ui/po-angular/blob/master/CONTRIBUTING.md

Rode este comando para atualizar a branch master antes de criar uma nova branch.

```shell
git pull
```
Tokens:
Raw