Kimserey's blog

Create a Navigation loading bar for Angular with PrimeNG In Angular, it is common practice to execute commands prior routing a page using guards and resolvers. Guards prevent the routing from occuring until the condition turns to true and resolvers prevent the routing from occuring until the data is returned. Those actions can take time to complete and during the time being, the component will not load leaving the user with an impression of unresponsiveness. Today we will see how we can implement a navigation loading bar for Angular using PrimeNG progress bar component in two parts: Setup an Angular project PrimeNG Progress bar If you are unfamiliar with the Angular router, you can have a look at my previous blog post explaining the feature of the router https://kimsereyblog.blogspot.com/2017/06/how-to-use-angular-router.html . 1. Setup an Angular project We start by creating a project and installing PrimeNG. npm install primeng --save npm install primeicons --save Next we a...

Bundle Bootstrap using Webpack Few weeks ago I talked about LibMan which was a tools preinstalled on Visual Studio 2017 preview allowing local download of cdnjs minified css/js. Today I will show how we can configure Webpack with npm to manage libraries like Bootstrap and minify both css and js while applying all its good algorithm like tree shacking. Get started with Webpack Bundle js Bundle css Multiple configurations 1. Get started with Webpack The goal of Webpack is to make it easy for developers to bundle code together and reduce its size in order to provide the smallest functional possible file to serve to users. In this post, I will show how we can bundle Bootstrap 4.0, both its js and its sass source code in order to provide two bundle, bundle.js and bundle.css . Before we look into Webpack, lets look at the steps which would be required to provide the bundles. Bootstrap npm package comes with js modules which are separated by functionality. For example for the moda...

Prime NG data table for Angular In every web application there is a need to display data in a tabular form. If the amount of data is small, a simple combination of HTML with Bootstrap is enough. But when the data is large, or more advanced functionalities are needed like sort or pagination, a more elaborated table needs to be used. If you followed me, you must have noticed that I am a huge fan of Prime NG and once again, Prime NG saves us the burden of implementing a complex data table by providing an Angular component fully featured. Today we will see how to use it in 3 parts: 1. Use Prime NG data table 2. Customized cell template 3. Pagination All the source code for this example is available on my GitHub . 1. Use Prime NG data table 1.1 Basic usage Start by installing Prime NG. npm install primeng --save Then in your main app module, register the DataTableModule to get access to its components. @NgModule({ imports: [ ... other imports DataTableModule ], ... o...

Create a navbar responsive display with flexbox and boostrap v4 Last week we saw how to setup vscode to compile sass. Today we will see how we can compile bootstrap sass files together with our own sass and define a grid layout for the collapsed nav in smaller screen using flexbox. Flexbox Bootstrap sass media directive Build the nav style We will be creating the style for the following navbar: 1. Flexbox Flexbox allows to control how elements are rendered in a responsive layout. We can control precisely how the space available is occupied by elements together with the order of appearance. There’s few settings for it which are applied to the container and the elements within the container. Refer to MDN documentation if you want more explanation https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes . In this tutorial, I will only use the following css properties: For the container: display: flex; flex-flow: row wrap; display:f...