{"id":14520391,"url":"https://github.com/po-ui/po-angular","last_synced_at":"2025-04-29T21:22:47.501Z","repository":{"id":37449522,"uuid":"193748094","full_name":"po-ui/po-angular","owner":"po-ui","description":"Biblioteca de componentes Angular.","archived":false,"fork":false,"pushed_at":"2025-04-25T14:28:40.000Z","size":16458,"stargazers_count":935,"open_issues_count":140,"forks_count":218,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-04-25T18:57:49.957Z","etag":null,"topics":["angular","angular-components","enterprise","frontend","hacktoberfest","po","po-ui","ui-components"],"latest_commit_sha":null,"homepage":"https://po-ui.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/po-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-25T16:50:39.000Z","updated_at":"2025-04-22T13:45:45.000Z","dependencies_parsed_at":"2023-10-14T22:35:43.582Z","dependency_job_id":"c138e1c7-1ad6-4f6a-834a-aa703a883f8f","html_url":"https://github.com/po-ui/po-angular","commit_stats":{"total_commits":1574,"total_committers":88,"mean_commits":"17.886363636363637","dds":0.863405336721728,"last_synced_commit":"0b12f25cc1d59f45a42e1a6186da51540fbb5edc"},"previous_names":["portinariui/portinari-angular"],"tags_count":312,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/po-ui%2Fpo-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/po-ui%2Fpo-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/po-ui%2Fpo-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/po-ui%2Fpo-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/po-ui","download_url":"https://codeload.github.com/po-ui/po-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251099759,"owners_count":21536158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-components","enterprise","frontend","hacktoberfest","po","po-ui","ui-components"],"created_at":"2024-09-04T04:01:41.609Z","updated_at":"2025-04-28T17:55:42.536Z","avatar_url":"https://github.com/po-ui.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://po-ui.io\"\u003e\n    \u003cimg width=\"250\" src=\"./docs/assets/po-logos/po_color_bg.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nBiblioteca de componentes de UI para Angular.\n\n[![Travis branch](https://img.shields.io/travis/com/po-ui/po-angular/master?style=flat-square)](https://travis-ci.com/github/po-ui/po-angular)\n[![npm package](https://img.shields.io/npm/v/@po-ui/ng-components?color=%23c9357d\u0026style=flat-square)](https://www.npmjs.org/package/@po-ui/ng-components)\n[![NPM downloads](https://img.shields.io/npm/dm/@po-ui/ng-components?color=c9357d\u0026label=npm%20downloads\u0026style=flat-square)](https://npmjs.com/package/@po-ui/ng-components)\n[![GitHub license](https://img.shields.io/npm/l/@po-ui/ng-components?color=%23c9357d\u0026style=flat-square)](https://github.com/po-ui/po-angular/blob/master/LICENSE)\n[![Twitter](https://img.shields.io/badge/Twitter-POUI-c9357d?style=flat-square\u0026logo=twitter)](https://twitter.com/pouidev)\n\n\u003c/div\u003e\n\n---\n\n### Pré-requisitos\n\nPara começar a utilizar o **PO UI** é pré-requisito ter o `Node.js` instalado (versão 18.19.x ou acima) e o seu gerenciador de pacote favorito na versão mais atual. Caso você ainda não tenha instalado o pacote `@angular/cli`, instale-o via `npm` ou `yarn`.\n\nInstalando com npm:\n```\nnpm i -g @angular/cli@19\n```\n\nCaso prefira instalar com o yarn:\n```\nyarn global add @angular/cli@19\n```\n\n### Passo 1 - Crie o seu primeiro projeto\n\n\u003e Caso você já tenha um projeto criado e deseje apenas incluir o **Po**, pule esta etapa e vá para o **Passo 1.1**.\n\nO [Angular CLI](https://cli.angular.io/) se encarrega de construir toda estrutura inicial do projeto. Para isso, execute o seguinte comando:\n\n```\nng new my-po-project --skip-install\n```\n\n\u003e O parâmetro `--skip-install` permite criar o projeto, contudo, não instalará as dependências automaticamente.\n\n\n#### Passo 1.1 - Instalando as dependências\n\nAntes de executar a instalação ou inserir o **Po** no seu projeto existente, é necessário verificar as dependências do seu projeto, algumas delas precisam estar de acordo com a versão do **Po** e Angular (elas podem ser encontradas no arquivo `package.json` localizado na raiz da aplicação).\n\nVeja abaixo a lista de dependências e as versões compatíveis, elas devem ser conferidas e se necessário, ajustadas no seu projeto.\n\n```json\n  \"dependencies\": {\n    \"@angular/animations\": \"~19.0.0\",\n    \"@angular/common\": \"~19.0.0\",\n    \"@angular/compiler\": \"~19.0.0\",\n    \"@angular/core\": \"~19.0.0\",\n    \"@angular/forms\": \"~19.0.0\",\n    \"@angular/platform-browser\": \"~19.0.0\",\n    \"@angular/platform-browser-dynamic\": \"~19.0.0\",\n    \"@angular/router\": \"~19.0.0\",\n    \"rxjs\": \"~7.8.0\",\n    \"tslib\": \"^2.3.0\",\n    \"zone.js\": \"~0.15.0\"\n    ...\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"~19.0.5\",\n    \"@angular-devkit/schematics\": \"~19.0.5\",\n    \"@angular/cli\": \"~19.0.5\",\n    \"@angular/compiler-cli\": \"~19.0.0\",\n    ...\n    \"typescript\": \"~5.6.2\"\n  }\n```\n\nApós verificar se estas dependências do seu projeto estão com as versões compatíveis declaradas acima, acesse a pasta raiz do seu projeto e execute o comando abaixo:\n\nInstalando com npm:\n```\nnpm install\n```\n\n\u003e Caso utilizar a versão 7 do npm pode ocorrer erro de versão das dependências, neste caso utilize `npm install --legacy-peer-deps`.\n\nCaso prefira instalar com o yarn:\n```\nyarn install\n```\n\n### Passo 2 - Adiconando o pacote @po-ui/ng-components\n\nUtilizando o comando `ng add` do [Angular CLI](https://cli.angular.io/), vamos adicionar o **Po** em seu projeto e o mesmo se encarregará de configurar o tema, instalar o  guia de primeiros passos **Po**. Além de importar também o modulo **HttpClientModule**.\n\nExecute o comando abaixo na pasta raiz do seu projeto:\n\n```\nng add @po-ui/ng-components\n```\n\n\u003e Ao executar o comando acima, será perguntado se deseja incluir uma estrutura inicial em seu projeto com menu lateral, página e toolbar, utilizando componentes do **Po**, **caso desejar, apenas informe: `Y`**.\n\n### Passo 3 - Rode o seu projeto\n\nAgora basta executar mais um comando para subir a aplicação e ver o seu projeto rodando no *browser* ;).\n\n```\nng serve\n```\n\nAbra o *browser* e acesse a url http://localhost:4200. Pronto!\n\n----\n\n### E agora?\n\nAgora é só abrir seu **editor / IDE** favorito e começar a trabalhar no seu projeto.\n\nCaso você queira utilizar nossos componentes de templates, como o **[po-page-login](https://po-ui.io/documentation/po-page-login)**, **[po-modal-password-recovery](https://po-ui.io/documentation/po-modal-password-recovery)**, **[po-page-blocked-user](https://po-ui.io/documentation/po-page-blocked-user)**, **[po-page-dynamic-table](https://po-ui.io/documentation/po-page-dynamic-table)** entre outros, basta adicionar o pacote `@po-ui/ng-templates` executando o comando abaixo:\n\n```\nng add @po-ui/ng-templates\n```\n\u003e Ao executar este comando, será instalado o pacote `@po-ui/ng-templates` e configurado o `PoTemplatesModules` no `app.module`.\n\nA partir dai o seu projeto está preparado para receber outros componentes do **[PO UI](https://po-ui.io/documentation)**! \\o/\n","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Sep 03, 2024](/content/2024/09/03/README.md)","UI Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpo-ui%2Fpo-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpo-ui%2Fpo-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpo-ui%2Fpo-angular/lists"}