Skip to content

useful assortment of angular pipes, decorators and directives

Notifications You must be signed in to change notification settings

simars/ngx-mix-libraries

Repository files navigation

NgxMixLibraries

This project was generated with Angular CLI version 6.0.8. This projects is houses ngx-mix library as a library project and wraps it with some demonstrations in the root project

NgxMix

projects/ngx-mix-form

Pipes

apply & applyPure pipes

applyPure Pipe Transforms the input that changes only by reference value by applying given pure function

@Component({
  selector: 'app-apply-pipe',
  template: '<span>SUM of {{fib | json}} =  {{fib | applyPure: sum}}</span>'
})
export class ApplyPipeComponent {

 fib = [1, 2, 3, 5, 8, 13];
 constructor() { }
 
  public sum(collection: [number]): number {
    return collection.reduce((first, second) => first + second);
  }

}

apply Pipe Transforms the input value by applying given function

Learn about pure and impure | Pipes

NgxMixForm

CustomValidators Build custom cross-field validators for Reactive Froms, ex where one field is required or not required based on state of another field

projects/ngx-mix-form

  class AppComponent implements OnInit  {
   registerForm: FormGroup;
   constructor( @Inject(FormBuilder) private formBuilder: FormBuilder) {}

   ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            phone: ['', [Validators.pattern('[0-9]*')]],
            email: ['', [ Validators.email]]
        },
        {
          validator: [
            CustomValidators.requiredEither('email', 'phone')
          ]
        }
       );
    }

Build, Deploy, Test and Try out

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. The wrapper project uses ngx-mix libraries and hosts demonstration of library features

Wrapper projects includes ngx-mix library in it's path

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Run npm run build:lib or ng build ngx-mix --prod to builds ngx-mix library bundle for distribution in dist/

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

About

useful assortment of angular pipes, decorators and directives

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published