Tuesday, January 25, 2022

Template Driven and Reactive Forms Datepicker Angular Material 12

Template Driven and Reactive Forms Datepicker Angular Material 12



In this post, we will learn how to use the Angular Forms API with Datepicker, also we will learn with Template Driven Forms (ngModel).

Let's start.

We will work with Angular forms. You will have the next advantages, reactive por example is Explicit, Created in component class, Structured and immutable, Synchronous and form validation through functions.

We will work with Template Driven. You will have the next advantages,  is implicit, created by directives, unstructured and mutable, Asynchronous  and form validation through directives.

In my case both are useful however it depends on what will be done in your application.

If you want more documentacion go to Angular documentacion.


In this post. I will give two basic examples.

Case: we will have two calendars from the first Datepicker to update second Datepicker, with Angular Forms and Template Driven. ok let go. 


In both examples I used moment js for format date.

Run both examples on Stackbliz.


Angular Forms


Ts class.

import { Component, OnInit, VERSION } from '@angular/core';
import {
FormBuilder,
FormGroup,
FormControl,
Validators,
} from '@angular/forms';

import {
MomentDateAdapter,
MAT_MOMENT_DATE_ADAPTER_OPTIONS,
} from '@angular/material-moment-adapter';
import {
DateAdapter,
MAT_DATE_FORMATS,
MAT_DATE_LOCALE,
} from '@angular/material/core';


import * as _moment from 'moment';

import moment from 'moment';

export const MY_FORMATS = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};

@Component({
selector: 'app-fdatepicker',
templateUrl: './fdatepicker.component.html',
styleUrls: ['./fdatepicker.component.css'],
providers: [
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
// application's root module. We provide it at the component level here, due to limitations of
// our example generation script.
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
},

{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})
export class fdatepickerComponent implements OnInit {
constructor(private fb: FormBuilder) {}

formPopPup: any;

date1 = new FormControl(moment());
date2 = new FormControl(moment());

ngOnInit() {
this.formPopPup = new FormGroup({
firstDate: new FormControl(),
secondDate: new FormControl(),
});

this.formPopPup = this.fb.group({
firstDate: [null, Validators.required],
secondDate: [null, Validators.required],
});
}

OnDateChange(e: any) {
var new_date = moment(e, 'DD-MM-YYYY').add(0, 'days').add(2, 'months');

this.formPopPup.get('secondDate').setValue(new_date);
}
}




Html

<p>Angular Forms Example</p>
<mat-sidenav-container>
<form [formGroup]="formPopPup">
<table>
<tr>
<td>
<mat-form-field>
<input
matInput
[matDatepicker]="fi"
formControlName="firstDate"
#firstDate
[formControl]="date1"
(dateInput)="OnDateChange($event.value)"
/>
<mat-datepicker-toggle matSuffix [for]="fi"></mat-datepicker-toggle>
<mat-datepicker #fi> </mat-datepicker>
</mat-form-field>
</td>
<td>
<mat-form-field>
<input
matInput
[matDatepicker]="se"
formControlName="secondDate"
[formControl]="date2"
/>
<mat-datepicker-toggle matSuffix [for]="se"></mat-datepicker-toggle>
<mat-datepicker #se> </mat-datepicker>
</mat-form-field>
</td>
</tr>
</table>
</form>
</mat-sidenav-container>




Template Driven


Ts class.


import { Component, VERSION } from '@angular/core';

import * as _moment from 'moment';

import moment from 'moment';

@Component({
selector: 'app-tdatepicker',
templateUrl: './tdatepicker.component.html',
styleUrls: ['./tdatepicker.component.css'],
})
export class tdatepickerComponent {
date1: any;
date2: any;

dateChangeHandler(e: any) {
var new_date = moment(new Date(this.date1), "DD-MM-YYYY").add(0, 'days').add(3, 'months');
this.date2 = new_date;
}
}


Html

<p>Template driven</p>
<mat-sidenav-container>
<table>
<tr>
<td>
<mat-form-field>
<input
matInput
[matDatepicker]="d1"
(dateChange)="dateChangeHandler($event)"
[(ngModel)]="date1"
/>
<mat-datepicker-toggle matSuffix [for]="d1"></mat-datepicker-toggle>
<mat-datepicker #d1> </mat-datepicker>
</mat-form-field>
</td>
<td>
<mat-form-field>
<input
matInput
[matDatepicker]="d2"
[(ngModel)]="date2"
/>
<mat-datepicker-toggle matSuffix [for]="d2"></mat-datepicker-toggle>
<mat-datepicker #d2> </mat-datepicker>
</mat-form-field>
</td>
</tr>
</table>
</mat-sidenav-container>




In both cases will be the same and add three months to the second calendar however the angular forms using FormControl in reactive way, whereas  Template is driven using ngModel.







References: https://material.angular.io/




Monday, January 17, 2022

Deploy Spring Boot 2 Kotlin Java 11 on Heroku

Deploy Spring Boot 2  Kotlin  Java 11 on Heroku.

Heroku concepts is extract from Heroku is a cloud platform that lets companies build, deliver, Monitor and scale apps, we are the fastest way to go from idea to URL, by passing all those infrastructure headches.


we will create a free account from deploy your apps. in next link, this way, 




















Next to will be do login. and will have the next page.









Click right corner -> New -> Create new app. set name the app. This way.
















Click on button Create app. and will have the next page.



















In this case I used Heroku Cli, check the link for install Heroku Cli. and the next just follow steps, Heroku provide.

$ heroku login -i


Eg:






Create a new Git repository


Initialize a git repository in a new or existing directory

$ cd my-project/
$ git init
$ heroku git:remote -a backend-eg


Deploy your application
Commit your code to the repository and deploy it to Heroku using Git.

$ git add .
$ git commit -am "make it better"
$ git push heroku master



Succes install.








Public URL, for access my webservice.

https://backend-eg.herokuapp.com/services/hello
https://backend-eg.herokuapp.com/services/hello/henry






Source code.

Here on GitHub.









Multiple Data Sources in Spring Boot 3 with Java 21

  In this blog post, we'll explore the configuration and setup for a Spring Boot 3 application with Java 21 that uses multiple data sour...