Kimserey's blog

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

A better dotnet CLI experience with ConEmu When developing multiple Web api under multiple Visual Studio solutions, it can become very tedious to maintain, run and debug. Opening multiple instances of Visual Studio is very costly in term of memory and running all at once also clutter the screen which rapidly becomes irritating. With the advent of dotnet CLI tools, it has been clear that the next step would be to move out of the common “right click/build, F5” of Visual Studio and toward “dotnet run” on a command prompt. Last month I was looking for a Windows alternative of the bash terminal which can be found on Mac and I found ConEmu . ConEmu provides access to all typical shells via an enhanced UI. It is actively maintained and open sourced https://github.com/Maximus5/ConEmu . Today we will see how we can use ConEmu to ease our development process by leveraging only 2 of its features; the tasks and environment setup. This post will be composed by 4 parts: 1. dotnet CLI 2. Setup ...

Configurations in ASP NET Core Every application needs configurations, whether it is a port, or a path or simply string values. In order to deal with configurations, ASP NET Core ships with a Configuration framework. The framework provides a builder allowing to read configurations from different json files, supports environment convention and also defining custom configuration providers in order to read from other sources like MSSQL or other services. Today we will see how we can use the configuration framework. This post will be composed by 2 parts: 1. Install the configuration framework 2. Make configuration injectable via Options 1. Install the configuration framework We start first by making sure we have the library installed, Microsoft.Extensions.Configuration . In Startup constructor use the ConfigurationBuilder to extract configurations: public IConfigurationRoot Configuration { get; set; } public Startup(IHostingEnvironment env) { var builder = new ConfigurationBu...

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

Bootstrap your Angular project with Angular CLI In order to facilitate the creation of a new Angular project, it is possible to use the Angular CLI . Angular CLI is a CLI providing functionality to bootstrap, upgrade and serve your Angular app. Today we will see how we can use Angular CLI to improve our workflow. Bootstrap a new project Creating new components Serve the application 1. Bootstrap a new project Start first by installing Angular CLI with the following command: npm install -g @angular/cli After the installation, the cli should be available globally via the ng command. You can try it with ng help . To bootstrap a project, we use ng new my-new-project . We can also specify some options, here we specify that we want to skip the tests creation which is set to true by default, we want inline style and inline template. ng new my-new-project --skip-tests --inline-style --inline-template This creates the simplest Angular app. We have the main module app.module.ts and ...