EduComponentsLibrary
Set of extra angular material
components.
It is developed using Angular >= 7.1.0
and its newly introduced ng g library
schematics.
Library location: projects/ngx-edu-components
directory of this repository.
Installation
npm i ngx-edu-components
Import the module NgxEduComponentsModule
import { HttpClientModule } from ' @angular/common/http ' ;
import { NgModule } from ' @angular/core ' ;
import { FormsModule , ReactiveFormsModule } from ' @angular/forms ' ;
import { MatAutocompleteModule , MatInputModule } from ' @angular/material ' ;
import { BrowserModule } from ' @angular/platform-browser ' ;
import { BrowserAnimationsModule } from ' @angular/platform-browser/animations ' ;
import { NgxEduComponentsModule } from ' ngx-edu-components ' ;
import { AppComponent } from ' ./app.component ' ;
@ NgModule ( {
declarations : [ AppComponent ] ,
imports : [
... ,
NgxEduComponentsModule
] ,
providers : [ ] ,
bootstrap : [ AppComponent ]
} )
export class AppModule { }
NgxEduDatepickerComponent
import { NgxEduDatepickerComponent } from 'ngx-edu-components'
selector: ngx-edu-datepicker
@Inputs()
yourFormGroup: FormGroup (Required)
yourFormControlName: string (Required)
placeholder: string (Optional, default: 'Fecha')
Usage
In your component .ts
createFormGroup ( ) : FormGroup {
return this . _formBuilder . group ( {
... ,
FechaNacimiento : [ ' ' , Validators . required ] ,
} ) ;
}
In your component .html
< ngx-edu-datepicker
[ yourFormGroup ]= " dialogForm "
[ yourFormControlName ]= " 'FechaNacimiento' "
[ placeholder ]= " 'Fecha de nacimiento' " > </ ngx-edu-datepicker >
NgxEduGalleryComponent
import { NgxEduGalleryComponent } from 'ngx-edu-components'
selector: ngx-edu-gallery
@Inputs()
images: ImageItem
imagesHeight: number (Optional, , default: 200)
defaultImageUrl: string (Required, default: '')
Usage
In your component .ts
this . images = [ {
url : ' yourImageUrl1 ' ,
alt : ' Image 1 '
} ,
{
url : ' yourImageUrl2 ' ,
alt : ' Image 2 '
} ,
{
url : ' yourImageUrl3 ' ,
alt : ' Image 3 '
} ] ;
In your component .html
< ngx-edu-gallery
[ images ]= " images "
[ imagesHeight ]= " 200 "
[ defaultImageUrl ]= " 'yourDefaultImageUrl' " > </ ngx-edu-gallery >
NgxEduCropperComponent
import { NgxEduCropperComponent } from 'ngx-edu-components'
selector: ngx-edu-cropper
@Inputs()
imageUrl: string (Required, default: '')
minContainerHeight: number (Optional, , default: 325, minimum: 325)
defaultImageUrl: string (Required, default: '')
@Outputs()
onChange: EventEmitter
Usage
In your component .ts
this . imageUrl = ' yourImageUrl ' ;
In your component .html
< ngx-edu-cropper
[ imageUrl ]= " imageUrl "
[ minContainerHeight ]= " 325 "
( onChange )= " onChange($event) " > </ ngx-edu-cropper >
NgxEduCropperDialogComponent
Usage
In your component .ts
@ ViewChild ( ' imageCanvas ' ) public imageCanvas : ElementRef ;
confirmDialogRef : any ;
openCropperDialog ( ) {
const config : MatDialogConfig = {
width : ' 50% ' ,
disableClose : true ,
panelClass : ' ' ,
data : {
imageUrl : ' assets/images/default/company.jpg ' ,
title : ' Recorde de imagen ' ,
accept : ' Aceptar ' ,
cancel : ' Cancelar ' ,
close : ' Cerrar '
}
} ;
this . confirmDialogRef = this . dialog . open ( NgxEduCropperDialogComponent , config ) ;
this . confirmDialogRef . afterClosed ( ) . subscribe ( ( result : NgxEduCropperResponse | boolean ) => {
if ( ! result ) return ;
this . imageCanvas . nativeElement . appendChild ( ( < NgxEduCropperResponse > result ) . canvas ) ;
} ) ;
}
In your component .html
NgxEduPhoneNumberComponent
@Inputs()
yourFormGroup: FormGroup (Required)
countryCodeFormControlName: string (Required)
areaCodeFormControlName: string (Required)
localPhoneNumberFormControlName: string (Required)
countries: Country
defaultCountry: Country (Required)
selectedCountry: Country (Optional, default: null)
options: PhoneNumberOptions (Optional, default: {
disabled: false,
countryPlaceholder: 'País',
areaCodePlaceholder: 'Código',
prefix: '15',
numberPlaceholder: 'Número'
};)
Usage
In your component .ts
this . yourCountries = [
{
id : ' ar ' ,
name : ' Argentina ' ,
icon : ' assets/images/flags/ar32.png ' ,
code : ' 549 '
} ,
{
id : ' br ' ,
name : ' Brasil ' ,
icon : ' assets/images/flags/br32.png ' ,
code : ' 55 '
}
] ;
this . yourDefaultCountry = this . yourCountries [ 0 ] ;
this . yourOptions = {
disabled : false ,
countryPlaceholder : ' País ' ,
areaCodePlaceholder : ' Código ' ,
prefix : ' 15 ' ,
numberPlaceholder : ' Número '
} ;
createFormGroup ( ) : FormGroup {
return this . _formBuilder . group ( {
... ,
countryCode : [ ' ' , Validators . required ] ,
areaCode : [ ' ' , Validators . required ] ,
localPhoneNumber : [ ' ' , Validators . required ] ,
} ) ;
}
In your component .html
< ngx-edu-phone-number
[ yourFormGroup ]= " nameOfYourFormGroup "
[ countryCodeFormControlName ]= " 'countryCode' "
[ areaCodeFormControlName ]= " 'areaCode' "
[ localPhoneNumberFormControlName ]= " 'localPhoneNumber' "
[ countries ]= " yourCountries "
[ defaultCountry ]= " yourDefaultCountry "
[ options ]= " yourOptions " > </ ngx-edu-phone-number >
NgxEduSelectComponent
@Inputs()
yourFormGroup: FormGroup (Required)
yourFormControlName: string (Required)
multiple: boolean (Optional, default: false)
placeholder: string (Optional, default: '')
filterPlaceholder: string (Optional, default: 'Buscar...')
selectAnOption: any
options: Country (Required, default: [])
displayOption: any
compareWith: Function (Required)
@Outputs()
onChange: EventEmitter
Usage
In your component .ts
export class AppComponent {
options : any [ ] = [
{
id : ' 1 ' ,
name : ' Opción 1 ' ,
description : ' Descripción 1 '
} ,
{
id : ' 2 ' ,
name : ' Opción 2 ' ,
description : ' Descripción 2 '
} ,
{
id : ' 3 ' ,
name : ' Opción 3 ' ,
description : ' Descripción 3 '
} ,
{
id : ' 4 ' ,
name : ' Opción 4 ' ,
description : ' Descripción 4 '
} ,
{
id : ' 5 ' ,
name : ' Opción 5 ' ,
description : ' Descripción 5 '
}
] ;
myFormGroup : FormGroup ;
constructor (
private _formBuilder : FormBuilder ,
) {
const selectedOptions = [ this . options [ 2 ] , this . options [ 4 ] ]
this . myFormGroup = this . _formBuilder . group ( {
Option : [ this . options [ 3 ] , [ Validators . required ] ] ,
Options : [ selectedOptions , [ Validators . required ] ] ,
} ) ;
}
compareFn ( v1 : any , v2 : any ) : boolean {
return v1 && v2 ? v1 . id === v2 . id : v1 === v2 ;
}
getFormGroupValues ( ) {
const rawValue = this . myFormGroup . getRawValue ( ) ;
console . log ( ' AppComponent > getFormGroupValues > rawValue ' , rawValue ) ;
}
}
In your component .html
< ngx-edu-select [ yourFormGroup ]= " myFormGroup " [ yourFormControlName ]= " 'Option' " [ options ]= " options "
[ displayOption ]= " 'name' " [ placeholder ]= " 'Librería' " [ selectAnOption ]= " 'Seleccione una opción' "
[ compareWith ]= " compareFn " > </ ngx-edu-select >
< ngx-edu-select [ yourFormGroup ]= " myFormGroup " [ yourFormControlName ]= " 'Options' " [ options ]= " options "
[ displayOption ]= " 'name' " [ placeholder ]= " 'Librería' " [ multiple ]= " true "
[ compareWith ]= " compareFn " > </ ngx-edu-select >
< button ( click )= " getFormGroupValues() " > Get FormGroup Values </ button >
Running the example in local env
npm i
Run ng serve
for a dev server and running the demo app. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Build the NgxMatTypeahead module
Run ng build NgxMatTypeahead
to build the library. The build artifacts will be stored in the dist/ngx-edu-components
directory. Use the --prod
flag for a production build.