Showing posts from 2017

Inline form Angular and PrimeNg

Inline form Angular and PrimeNgInline 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 dataFor the form we will be using Bootstrap, PrimeNg and FontAwesome.
Bootstrap provides univer…

Easily ensure that data are loaded with Ngrx store and router guards in Angular

Easily ensure that data are loaded with Ngrx store and router guards in AngularLast 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 2. Rout…

Tree structure in Angular with PrimeNg

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 PrimeNgPrimeNg 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 angularCLI .angu…

A better dotnet CLI experience with ConEmu

A better dotnet CLI experience with ConEmuWhen 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 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 environmen…

Configurations in ASP NET Core

Configurations in ASP NET CoreEvery 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 frameworkWe 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 ConfigurationBuilder() …

Managing global state with Ngrx store in Angular

Managing global state with Ngrx store in AngularThe 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 application …

Bootstrap your Angular project with Angular CLI

Bootstrap your Angular project with Angular CLIIn 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 projectCreating new componentsServe the application1. Bootstrap a new projectStart 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 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 component app.module.ts.

How to use the Angular Router

How to use the Angular RouterToday 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. This post will be composed by 6 parts:Define routesRouter outletSpecial routesData and ActivatedRouteResolve guardCanXXX guards1. Define routesTo start, we need to import the RouteModule and the Routes type from the Angular router.import { RouterModule, Routes } from '@angular/router'; The routes are defined via constant and then injected into the router module using either forRoot or forChild.forRoot is used to define routes on the main module and forChild is used to define routes on the child modulesFor example we can define two routes which we add to the main module:const routes: Routes = [ { path: 'home', component: MainPageComponent, }, { path: '', redirectTo: &#…

Reactive form with Angular

Reactive form with AngularI 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.WebSharper was the real first innovation. It came out with a set of combinator that I explained in a [previous blog post] removing the “dirtiness” of form handling.
It just felt right. And when things in programming start to feel right, it means you are on the right path.Since its evolution from 1.x.x, Angular have supports for reactive form with a form builder. Today I will explain the concept and how to use it.1. Create a rea…

How to declare a component in angular

How to declare a component in angularLast 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.1. Parameters 2. Input/Ouput 3. Access child component 4. NgOnChange 1. ParametersComponent in Angular derives from directives. Some of the most used properties are:providers which defines a injectable values or services scoped only by the component and its children (compared to injectable provided to the module which is application wide)selector which defines a CSS selector to use the componentHere are some of the parameter used to defined a component:styles for inline style in the componenttemplate to define inline templateFor example here is a simple component:@Component({ selector: 'app-square', template: '<div></div>', styles: [ &…