Building Beautiful Angular Apps with PrimeNG

By Glen Smith
Angular is a widely popular and productive JavaScript framework, but doesn't always provide consistent components. This course teaches you how to use the PrimeNG component library to build full-featured, beautiful Angular applications in record time.
Play course overview
Course info
Rating
(93)
Level
Intermediate
Updated
Aug 23, 2017
Duration
3h 8m
Table of contents
Course Overview
Course Overview 2m
Course Introduction
Introduction 1m What Is PrimeNG? 1m Getting the Most from This Course 1m Why Non-designers Love PrimeNG 1m Tour of the Sample App 4m Getting the Source 1m Course Outline 2m
PrimeNG Fundamentals
Introduction 1m What You'll Learn 1m Installing the Angular CLI 3m Working with Themes 1m Cloning the Sample App 1m Three Step Process 4m The Prime Grid System 3m Working with Icon Fonts 2m Building a Statistics Component 2m Implementing a Menu 2m Summary 1m
Charts for Visual Effect
Introduction 0m What You'll Learn 1m Getting Configured 2m Your First Pie Chart 2m Pie Data Models 2m Working with Dynamic Data 2m Polar Area Charts 1m Bar Charts 2m Line and Radar Charts 2m Mixing Chart Types 2m Interactive Charting 3m Deeper Customization 2m Realtime Charting 3m Summary 1m
Forms Unmasked
Introduction 0m What You'll Learn 1m Reactive Forms 1m Your First PrimeNG Reactive Form 3m Reactive Form Markup 5m The Great Validation Refactor 2m Styling Submit Buttons 2m Working with Masked Input 2m Working with TextAreas 1m Getting Rich with Text Editing 2m Fun with Calendars 2m Radio Buttons 2m Fieldsets 1m Choosing Devs with Dropdowns 2m Choosing Devs with Multiselect 1m Choosing Devs with a Listbox 1m Using Custom Item Templates 2m Using Spinners 1m Using Sliders 1m Using Ratings 2m Summary 1m
DataTables
Introduction 0m What You'll Learn 2m Your First PrimeNG DataTable 1m Datatable Markup 2m Sorting Tables 1m Filtering Tables 2m Custom UI Templates for Filtering 3m Re-order and Resize Columns 1m Facets: Customising Headers and Footers 2m CSV Export 1m Inplace Editing 4m Row Selection 4m Context Menu 4m Scrolling and Pagination 3m Lazy Loading 5m Summary 1m
Dialogs, Tabs, and Other Wizardry
Intro 0m What You'll Learn 2m Working with Tabs 3m Creating Dynamic Tabs 2m Handling Tab Changes 2m Working with Dialogs 2m Dialog Headers and Footers 1m Implementing Wizard Steps 2m Switching Step Panes 1m Adding a Schedule 4m Tree Controls 3m Working with Maps 4m DataGrids 2m Tooltips 1m Confirmation Dialogs 3m Toasting Growls 3m Summary 1m
Advanced Topics
Introduction 1m What You'll Learn 2m Drag and Drop 3m Using Galleria for Profile Images 1m Implementing Draggable 1m Selecting Images 2m Diving into PrimeNG Source 5m Unit Testing PrimeNG Components 6m Where to from Here? 1m Summary 1m
Description
Course info
Rating
(93)
Level
Intermediate
Updated
Aug 23, 2017
Duration
3h 8m
Description

Angular is a super productive and wildly popular JavaScript framework for stitching together great web applications. Unfortunately, it doesn’t provide any consistent set of ready-to-use, great-looking UI components out-of-the-box. PrimeNG is that missing library.

In this course, Building Beautiful Angular Apps with PrimeNG, you'll create a fun line business application, Agile Times, while covering a huge array of useful controls.

First, you'll explore specialty controls, including:

  • Realtime charts
  • Searchable datagrids
  • Interactive Google maps
  • Popup dialogs
  • Tree-style controls
Next, you'll dive into advanced topics, such as drag and drop controls, and unit testing.
Finally, you'll discover how to utilize the PrimeNG source when the documentation lets you down.

By the end of this course, you'll have the necessary knowledge to build useable and consistent Angular applications with PrimeNG.

Course FAQ
Course FAQ
What is PrimeNG?

PrimeNG is an open source library of UI components for Angular. It provides a consistent set of ready-to-use and attractive UI components "out-of-the-box".

What are some of the components PrimeNG provides?

Grids, charts, calendars, popup dialogs, Google Maps, Wizards, and similar elements that make your app more appealing and user-friendly.

What will we be doing in this course?

Building a stylish line of business application called Agile Times, pulling together all the building blocks of a great functional UI, and building much more usable, consistent and beautiful angular applications in far less time

Who is this course for?

This course is for anyone who wants to produce beautiful and familiar apps that users will love, without a team of graphic designers and UX people at their disposal.

What prerequisites will I need for this course?

You should already be familiar with Angular before taking this course. If you need to learn it or just want a refresher, check out these Angular courses.

About the author
Glen Smith
About the author

Glen is an enterprise software developer, trainer, author, and speaker based in Canberra, Australia.

More from the author
Progressive Web Apps: Sensor Integrations
Intermediate
1h 55m
Aug 1, 2018

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT