ng-language-field-ibrahim-usman

Beginner-friendly Angular language selector with country flags.

Author

Ibrahim Usman (MSCS)
Email: [email protected]

1) Install

npm i ng-language-field-ibrahim-usman @ng-select/ng-select

2) Add styles (required by ng-select)

In your Angular app angular.json, add:

"styles": [
	"node_modules/@ng-select/ng-select/themes/default.theme.css",
	"src/styles.scss"
]

3) Import module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { LanguageFieldLibModule } from 'ng-language-field-ibrahim-usman';

@NgModule({
	imports: [CommonModule, FormsModule, LanguageFieldLibModule]
})
export class SharedModule {}

4) Basic usage (copy/paste)

Component TS:

selectedLanguage = '';

Component HTML:

<iu-language-field
	id="language"
	name="language"
	label="Language"
	[(value)]="selectedLanguage">
</iu-language-field>

5) Custom language list

languages = [
	{ code: 'en', name: 'English' },
	{ code: 'ur', name: 'Urdu' },
	{ code: 'ar', name: 'Arabic' }
];

<iu-language-field
	[languagesList]="languages"
	bindLabel="name"
	bindValue="code"
	[multiple]="true"
	[(value)]="selectedLanguage">
</iu-language-field>

6) Inputs / Output

Inputs:

• id, name, label
• value
• required, placeholder
• multiple
• bindValue, bindLabel
• languagesList

Output:

• valueChange

7) Publish (owner)

ng build language-field-lib
cd dist/language-field-lib
npm publish --access public

Package link after publish:

https://www.npmjs.com/package/ng-language-field-ibrahim-usman

Common issues

• ng-select styles missing: add theme CSS in angular.json styles.
• Component not found: import LanguageFieldLibModule in the same Angular module.