Kimserey's blog

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

Difference between CanActivate and CanActivateChild in Angular Router Few weeks ago I spoke about the functionality of the Angular Router http://kimsereyblog.blogspot.com/2017/05/attribute-route-in-asp-net-core.html . It was a brief overview of all the router features but one of the feature was not totally explain, the CanActivate feature. From there a question emerged, what is the difference between CanActivate and CanActivateChild? . Today I will answer this question and at the same time discussing extra behaviours of the router with this post composed by 4 parts: 1. Refresh on CanActivate and CanActivateChild 2. Difference 3. Some considerations 4. Component reusability with router 1. Refresh on CanActivate and CanActivateChild As we saw in my previous post, CanActivate is a interface with a single function canActivate(...) . @Injectable() export class GuardTest implements CanActivate, CanActivateChild { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)

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

Easily ensure that data are loaded with Ngrx store and router guards in Angular Last month, I describe a way to manage global state with ngrx/store . With the store, we manage the overal state of the Angular application in a single global object. Loading and retrieving data affects a single main state object. This simplication gives opportunities to other simplications. Like for example, if we loaded once a collection of items, we wouldn't need to reload it when a component is displayed as it is available in the state. But how can we ensure that and more importantly how can we keep the check logic in a maintainable state. Here enter the Angular router route guard which I also described few weeks ago in my post on how we could create and manage routes with the Angular router . Today I will show how we can use both together to solve the issue of ensuring data is loaded before displaying a route. This post will be composed by 3 parts: 1. Extand the previous sample to load users