NGX-manager

Simply add manager aspects to your Angular 4.0+ project. This library contains form elements such as input-wrapper/checkbox/radio/select. It also includes services for translating and notifying the user.

Get Started

Installation

You can install this package locally with npm or yarn.

# To get the latest stable version

npm install @bravobit/ngx-manager ng-select ngx-cookie --save

# or

yarn add @bravobit/ngx-manager ng-select ngx-cookie

Usage

You should import our global styles.scss file into your project to get the CSS resets and normalize.

@import '~@bravobit/ngx-manager/styles/styles.scss';

You should add the following imports to your imports array.

imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
]

You should add the following declare module to the typings.d.ts file to be able to add languages to the forRoot method call.

declare module '*.json' {
    const value: any;
    export default value;
}

After you have added this statement to the typings.d.ts file, you should be able to import JSON files into your project.

import * as dutch from '../languages/dutch.language.json';

NgxManagerModule should be registered in the AppModule with forRoot() static method to get access to all our components/pipes/services/directives.

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {NgxManagerModule} from '@bravobit/ngx-manager';

import {AppComponent}  from './app.component';

import * as dutch from '../languages/dutch.language.json';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        NgxManagerModule.forRoot({
            languages: {nl: dutch}
        })
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Notifications

If you want to add notifications to your project you should add the <bb-notifications></bb-notifications> to your app.component.html

<router-outlet></router-outlet>

<bb-notifications></bb-notifications>

Form components

Form-control

<!-- Input (text/number/date/etc.) -->

<bb-form-control [label]="'My email input'" [icon]="'email'">
    <input [(ngModel)]="myEmail" placeholder="[email protected]">
</bb-form-control>

<!-- Textarea -->

<bb-form-control [label]="'My email textarea'" [icon]="'email'">
    <textarea [(ngModel)]="myEmail" placeholder="[email protected]" rows="10"></textarea>
</bb-form-control>

Select

<!-- NgModel -->

<bb-select [(ngModel)]="select" [label]="'My form control'" [items]="[]"></bb-select>

<!-- Reactive forms -->

<bb-select [formControlName]="'select'" [label]="'My form control'" [items]="[]"></bb-select>

Checkbox

<!-- NgModel -->

<bb-checkbox [(ngModel)]="myCheckbox" [label]="'My checkbox'"></bb-checkbox>

<!-- Reactive forms -->

<form [formGroup]="form">
    <bb-checkbox [formControlName]="myCheckbox" [label]="'My checkbox'"></bb-checkbox>
</form>

Radio

<!-- NgModel -->

<bb-radio [(ngModel)]="gender" [name]="'gender'" [label]="'Male'" [value]="'male'"></bb-radio>
<bb-radio [(ngModel)]="gender" [name]="'gender'" [label]="'Female'" [value]="'female'"></bb-radio>
<bb-radio [(ngModel)]="gender" [name]="'gender'" [label]="'Male and female'" [value]="'both'"></bb-radio>

<!-- Reactive forms -->

<form [formGroup]="form">
    <bb-radio [formControlName]="'gender'" [name]="'gender'" [label]="'Male'" [value]="'male'"></bb-radio>
    <bb-radio [formControlName]="'gender'" [name]="'gender'" [label]="'Female'" [value]="'female'"></bb-radio>
    <bb-radio [formControlName]="'gender'" [name]="'gender'" [label]="'Male and female'" [value]="'both'"></bb-radio>
</form>

Buttons

<!-- Default -->

<bb-button [value]="'Do something'"></bb-button>

<!-- Grouped -->

<bb-button-group [type]="'right'">
    <bb-button [color]="'grey'" [value]="'Reset'" [type]="'reset'"></bb-button>
    <bb-button [value]="'Submit'" [type]="'submit'"></bb-button>
</bb-button-group>

Structure components

Card

<bb-card [title]="'My card title'" [rightButtonBar]="[{id: 'delete', icon: 'delete'}]">
    <!-- Content -->
</bb-card>

Other

Translations

The TranslationsService can be used by using the dependency injection in Angular.

import {TranslationsService} from '@bravobit/ngx-manager';
import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    
    public constructor(private translations: TranslationsService) {
    }
    
    public ngOnInit(): void {
        // Set a new language.
        this.translations.use('de');
        
        // Translate a sentence.
        const translated = this.translations.instant('My form control placeholder');
    }
    
}

The TranslationPipe can be used in an Angular component template.

{{ 'Hello world!' | translate }}