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-cookieUsage
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="johndoe@gmail.com">
</bb-form-control>
<!-- Textarea -->
<bb-form-control [label]="'My email textarea'" [icon]="'email'">
<textarea [(ngModel)]="myEmail" placeholder="johndoe@gmail.com" 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 }}