Angular4 com PrimeNG

Postado em Atualizado em

Nas últimas semanas tive estudando e validando uma nova arquitetura com o Angular4 + PrimeNG. Como a coisa é muito nova, tem muita informações desencontrada, documentação ainda não é suficiente, ta tudo sempre mudando rápido, vira e meche agente fica patinando. Assim, segue abaixo então os passos corretos para você criar, instalar e rodar um projeto Angular4 com kit de componentes visuais PrimeNG.

Passo 1

Cria o projeto angular com angular-cli: ng new lab-angular4-primeng

Passo 2

Instale o primeNg: npm install primeng –save

Passo 3

Instale o font-awesome usado pelo primeNG: npm install font-awesome –save

Passo 4

Instale o animations usado pelo primeNG: npm install @angular/animations –save

Passo 5

No modulo principal, ative o modulo BrowserAnimationsModule de funcionamento do primeNG:

2

Passo 6:

Acrescente os css’s básicos usados pelo primeNG na configuração .angular-cli.json:

x

Assim o projeto esta configurado e pronto para uso!

Passo 7

Para cada componente que você deseja usar, é necessário ativar o seu respectivo modulo dentro do modulo principal do seu projeto. Segue um exemplo ativando PanelModule e InputMaskModule:

x1

Passo 8

Crie seus componentes e adicione os widgets do primeNG a vontade! Segue um exemplo abaixo usando primeNg Panel e InputMask com mascara de telefone:

x2

Executando no navegador:

3

A partir disso,  é só elaborar sua solução e criar seu sistema 100% front-end! Até a próxima galera 🙂 .

Git

Esse projeto esta disponível no meu git.

“Tu és o meu Deus; ensina-me a fazer a tua vontade. Que o teu Espírito seja bom para mim e me guie por um caminho seguro!” Salmos 143:10

Anúncios