Blog - kimserey lam

Sep 02, 2017

Typescript Extension Methods

Typescript is a superset of JavaScript. It provides type safety on top of the JS libraries. Type safety is an important part of the development experience as it allows us to detect problems early thanks to the compiler preventing us from writing broken code. JS being dynamic it is very easy to extend since anything is assumed to exist. In the context of extension methods, the only step needed is to add the method to the prototype of the class and we are done. Typescript kept that flexibility but in order to provide type safety on top of it, extra steps are needed. Today I would like to share how we can create extension methods in Typescript by extending existing types.

Aug 26, 2017

Angular Breadcrumb Primeng

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

Aug 19, 2017

Angular Router Can Activate

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.

Aug 10, 2017

Angular Inline Form With 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.

Aug 05, 2017

Guard Routes Angular Ngrx

Last month, I describe a way to manage global state with ngrx/store. With the store, we mamage 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.

Jul 29, 2017

Primeng Tree Structure

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.

Jul 22, 2017

Conemu A Better Command Prompt For Windows

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

Jul 15, 2017

Aspnet Core Configuration Framework And Appserttings

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.

Jul 08, 2017

Angular Ngrx

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.

Jun 27, 2017

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.

Jun 22, 2017

Understand Angular Router

Today we will see how to use the Angular Router. The router allows us to define routes which are transformed to urls which are then understood by the browser. Having routes allows us to create different categories and access points to our website.

Jun 15, 2017

Angular Reactive Form

I have been following the reactive movement for a long time now, especially from UI perspective from push design with websockets to in browser reactivity with WebSharper.UI.Next. In term of form design, I always felt like there was a lack. A form concept is simple, but it always escalates to an extremely over designed code with inline validation, server validation, incorrect validation at time, multisteps, asynchronous selection, etc… Something was missing, how the validation was done and how dirty it was to code a proper post back form.

Jun 10, 2017

Angular Ngcomponent

Last week I explained what was the NgModule in angular, we saw what were the parameters we could add and what those parameters could be composed of. Today I would like to talk about another main piece of Angular, the Component. We will see what argument it takes and how we can use it.

Jun 03, 2017

Angular Ngmodule

The first time I saw the NgModule decorator and its arguments I was completely lost. I couldn’t understand what was the meaning of imports, declarations, exports, providers or bootstrap and I had a hard time finding clear explanations. So today I will go through each attributes and provide an explanation together with an example to understand what is the role of each NgModule argument.

May 26, 2017

Entity Framework Core Sqlite

Entity Framework is a framework abstracting away all the complexity of dealing with storage. This abstraction is also known as ORM ~ object-relational mapping. There is a number of provider which are implementation of the storage like SQL server or MySql or also SQLite, the one we will be seeing in this post. SQLite is a embedded database. The whole database is contained within a single .db file which makes it highly portable, so portable that it is the default database installed in mobile OS like iOS and Android. It is extremely easy to use and to maintain. It also offer a powerful implementation of SQL. Today we will see how we can make use of Entity Framework with SQLite provider in a ASP.NET Core application.