Posts

Showing posts with the label HTML

Model-driven form with Angular FormBuilder

Image
Model-driven form with Angular FormBuilder Few weeks ago I explained how we could build reactive forms with Angular . In the previous post, I emphasized on how the reactiveness was enabling us to susbscribe to the state and “react” to any state changes. Since then I have been playing quite a bit with the reactive form and more precisely with the FormBuilder . I ended up being more impressed by the link between FormGroup and UI rendering rather than about the reactiveness nature of the state held by the form. So today I would like to expand more on the FormBuilder by showing the steps needed to build a more complicated form supporting arrays of arrays and different controls like date picker and color picker. This post will be composed by 3 parts: 1. Building the metadata element form 2. Building the array sections 3. Postback 1. Building the metadata element We start with a model which I just made up this model so there is no particular meaning in it. interface Model { name: st...
Post a Comment
Keep reading

Reactive form with Angular

Reactive form with Angular 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. 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. C...
2 comments
Keep reading

Create a responsive navbar with flexbox and boostrap v4

Image
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...
Post a Comment
Keep reading

How to make a sticky navbar using Bootstrap

Image
How to make a sticky navbar using Bootstrap Today I will demonstrate one way to achieve a sticky navbar in Bootstrap v4 using fixedsticky . This post will be composed by three parts: 1. Get the librairies 2. Page without the nav sticking 3. Make the nav stick 1. Get the librairies As mentioned in the introduction, we will be using fixedsticky and bootstrap v4. We start first by getting those via bower: Bootstrap v4 bower install bootstrap#v4.0.0-alpha.6 Fixed-sticky bower install filament-sticky You should then have it locally in your bower folder. 2. Page without the nav sticking We build a sample page without sticky. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <style> .content { background-color: rgba(0, 0, 255, 0.21); height: 2000...
Post a Comment
Keep reading