Wondering what’s next for npm?Check out our public roadmap! »

    ngx-edu-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.55 • Public • Published

    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

    1. In your component .ts
    createFormGroup()FormGroup {
        return this._formBuilder.group({
            ...,
            FechaNacimiento: ['', Validators.required],
        });
    }
    1. 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

    1. In your component .ts
    this.images = [{
        url: 'yourImageUrl1',
        alt: 'Image 1'
    },
    {
        url: 'yourImageUrl2',
        alt: 'Image 2'
    },
    {
        url: 'yourImageUrl3',
        alt: 'Image 3'
    }];
    1. 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

    1. In your component .ts
    this.imageUrl = 'yourImageUrl';
    1. In your component .html
    <ngx-edu-cropper
      [imageUrl]="imageUrl"
      [minContainerHeight]="325"
      (onChange)="onChange($event)"></ngx-edu-cropper>

    NgxEduCropperDialogComponent

    Usage

    1. In your component .ts
    @ViewChild('imageCanvas') public imageCanvasElementRef;
    confirmDialogRefany;
    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);
        });
    }
    1. In your component .html
    <div #imageCanvas></div>

    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

    1. In your component .ts
    // Set your countries
    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'
        }
    ];
    // Set your default country
    this.yourDefaultCountry = this.yourCountries[0];
     
    // Default Options
    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],
        });
    }
    1. 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

    1. 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]],
                Option: [this.options[3], [Validators.required]],
                // Options: [selectedOptions],
                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);
        }
    }
    1. 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.

    Install

    npm i ngx-edu-components

    DownloadsWeekly Downloads

    0

    Version

    1.0.55

    License

    MIT

    Unpacked Size

    1.09 MB

    Total Files

    69

    Last publish

    Collaborators

    • avatar