Kimserey's blog

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 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 component app.module.ts.
…

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 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 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: [ &…