Kimserey's blog

Publish Angular application with Angular CLI and AspDotNet Core A few months back I showed how to bootstrap an Angular application using Angular CLI . Apart from bootstrapping and serving, Angular CLI is also capable of packing the application and get it ready to be published in order for us to serve it on our own webserver. Today we will see how the process of publishing can be done in three steps 1. Prepare the project for packing 2. Create a host 3. Publish the application 1. Prepare the project for packing In order to ease the understanding, we start by separating our client Angular application and Host application. The client will go into /client while the host into /host . Here a preview of how the structure will look like: - MyApplication | - /.git | - /client | - /e2e | - /node_modules | - /src | - ... | - /host (nothing here yet) | - /Host | - MyApplication.Host.sln In order to create t...

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 ...

Model-driven form with Angular FormBuilder Few weeks ago I explained how we could build reactive forms with Angular . In the previous post, I emphasized on how the reactiveness was enabling us to susbscribe to the state and “react” to any state changes. Since then I have been playing quite a bit with the reactive form and more precisely with the FormBuilder . I ended up being more impressed by the link between FormGroup and UI rendering rather than about the reactiveness nature of the state held by the form. So today I would like to expand more on the FormBuilder by showing the steps needed to build a more complicated form supporting arrays of arrays and different controls like date picker and color picker. This post will be composed by 3 parts: 1. Building the metadata element form 2. Building the array sections 3. Postback 1. Building the metadata element We start with a model which I just made up this model so there is no particular meaning in it. interface Model { name: st...

Manage assets and static files with Angular CLI One of the easiest way to build Angular applicationns is through Angular CLI. Using the ng serve command will build and serve the whole application or we can use ng build to output the app into the outputDir folder, but there might be occasions where we need to serve files which aren’t part of the Angular process, like static files or images. Those files are referred to as assets . Today we will see how we can configure Angular CLI to copy assets to the output directory and what sort of configuration is available. 1. Copying assets 2. Glob file, input, output 1. Copying assets Files which need to be served by AngularCLI must be registered under assets in the .angular-cli.json file. When we first boostrap a project, there are two places registered under assets : { "apps": [{ "root": "src", "outDir": "dist", "assets": [ "assets", ...

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 ...

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...

Managing global state with Ngrx store in Angular The goal of Angular components is to be completely independent. This can lead to mismatch of displayed data where one component isn’t in sync with what other components are displaying. One solution is to have a stateful service shared among all components and delivering global data. This can be problematic when multiple pieces have to be globally accessible among multiple components. In this situation, the need for a global state becomes inevitable. Global state has had a bad reputation since inception due to its unpredictable nature. About two years ago, Redux was introduced as a way to manage this unpredictability by making the state immutable and operations acting on the state synchronous and stateless (a similiar approach can be found in the actor pattern). Since then, its principales has inspired multiple implementations, one of them being the Ngrx store for Angular. Today I will go through the library and build a sample applic...