Kimserey's blog

Create a Navigation loading bar for Angular with PrimeNG In Angular, it is common practice to execute commands prior routing a page using guards and resolvers. Guards prevent the routing from occuring until the condition turns to true and resolvers prevent the routing from occuring until the data is returned. Those actions can take time to complete and during the time being, the component will not load leaving the user with an impression of unresponsiveness. Today we will see how we can implement a navigation loading bar for Angular using PrimeNG progress bar component in two parts: Setup an Angular project PrimeNG Progress bar If you are unfamiliar with the Angular router, you can have a look at my previous blog post explaining the feature of the router https://kimsereyblog.blogspot.com/2017/06/how-to-use-angular-router.html . 1. Setup an Angular project We start by creating a project and installing PrimeNG. npm install primeng --save npm install primeicons --save Next we a...

SignalR Core with Angular Last week we saw how to Configure SignalR and get a server notifying a client built as Razor page via Websockets . We completed the post by having a fully functional backend setup with SignalR and authentication done via Resource Owner Password. Today we will see how we can connect to SignalR hub from an Angular application and demonstrate how we can authenticate in five parts: SignalR server Setup an Angular application Connect to SignalR hub Send messages Authentication 1. SignalR server We won’t be describing the server here, instead we will take from where we left in my previous blog post with the code fully available on my Github https://github.com/Kimserey/signalr-core-sample/tree/master/Example . Get the repository and run signalr-core-sample/Example . It will run a server on http://localhost:5000 with a SignalR hub on /chathub and Identity server configured with a client my-app setup with Resource owner password flow. 2. Setup an Angul...

Prime NG data table for Angular In every web application there is a need to display data in a tabular form. If the amount of data is small, a simple combination of HTML with Bootstrap is enough. But when the data is large, or more advanced functionalities are needed like sort or pagination, a more elaborated table needs to be used. If you followed me, you must have noticed that I am a huge fan of Prime NG and once again, Prime NG saves us the burden of implementing a complex data table by providing an Angular component fully featured. Today we will see how to use it in 3 parts: 1. Use Prime NG data table 2. Customized cell template 3. Pagination All the source code for this example is available on my GitHub . 1. Use Prime NG data table 1.1 Basic usage Start by installing Prime NG. npm install primeng --save Then in your main app module, register the DataTableModule to get access to its components. @NgModule({ imports: [ ... other imports DataTableModule ], ... o...

Implement a breadcrumb in Angular part 2 Last month I showed how we could build a breadcrumb with PrimeNG in Angular (you can read it as appetizer if you are interested in implementing a breadcrumb bar). In my previous post, I suggested to have a service BreadcrumbService which would hold the crumbs and get updated in ngOnInit of the component used on the route. Since then, I always was uncomfortable with this approach as this meant that my component would know the existance of a breadcrumb, because it updates it, while I always believed it should not know and not care . This led me to figure another way to abstract away from the component the concept of breadcrumb by combining guard, resolver and route. It can be achieved with the following 3 steps: 1. Register your crumbs as route data 2. Create a guard which ensure that the crumbs are set on the service before page is shown 3. Change the breadcrumb service to use a ReplaySubject instead of Subject 1. Register your crumbs as ...

Implement a breadcrumb bar in Angular with PrimeNg A breadcrumb bar is a very important piece of any website. It gives an idea where the user is currently in, from where the user landed on this page and finally allow the user to navigate back to any steps wanted. I like to call it an “enhanced version of the URL path”. The URL path in itself has the information but it might, at time, not be human readable. That is where the breadcrumb become indispensable. I showed few features of PrimeNg in my previous posts about building an inline form and about building a tree structure . It turns out that they also provide a Angular friendly breadcrumb component. Today we will see how we can make use of the breadcrumb component together with the Angular router to provide a breadcrumb bar. This post is composed by 3 parts: 1. PrimeNg Breadcrumb component 2. Breadcrumb service, parent/child component communication 3. Use the breadcrumb service together with the PrimeNg Breadcrumb component 1...

Inline form Angular and PrimeNg Inline form are used to edit portion of long forms. This makes the process of editing a long form less tedious and less error prone as the focus is on a small portion. The process of allowing the fields to be editable can be hard as the state of the field currently selected for editing needs to be tracked and the right input fields must be shown. Angular offers convenient directives to handle showing and hiding elements, together with ngrx store to handle the state and PrimeNg UI components, it is an ideal solution to build inline forms. In this post we will see how to build a user friendly form in 3 steps: 1. Build a diplay of segmented forms data 2. Build the segmented forms 3. Bind the display edit buttons to the forms displays This is a preview of what we will be building: The full source code is available on my GitHub . 1. Build a diplay of segmented forms data For the form we will be using Bootstrap, PrimeNg and FontAwesome. Bootstrap ...

Tree structure in Angular with PrimeNg PrimeNg is a Angular component library. Compared to other component libraries like ngbootstrap or material, PrimeNg comes with more advance components which can’t be found elsewhere, one of them being the tree structure. Having the component is one thing but having to build the tree data which can be used by the component is another hard part. Therefore today I will firstly show how we can use PrimeNg and secondly I will show how we can mold data to fit in the model used to build PrimeNg tree. This post will be composed by 3 parts: 1. Install PrimeNg 2. Mold data for Tree structure with reduce 3. Other use cases and benefits 1. Install PrimeNg PrimeNg can be added via npm npm install primeng --save . It also needs font awesome for icons which can be added via npm npm install font-awesome --save . After installed, under the /primeng/resources folder, we should be able to see the style files. Those needs to be added to the styles in the a...