ng-text-area-ibrahim-usman

Beginner-friendly Angular text component with 3 modes:

• rich editor (editor)
• plain textarea (textarea)
• single-line input (input)

Author

Ibrahim Usman (MSCS)
Email: [email protected]

1) Install

npm i ng-text-area-ibrahim-usman @ng-bootstrap/ng-bootstrap

2) Import module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { TextAreaLibModule } from 'ng-text-area-ibrahim-usman';

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

3) Basic usage (copy/paste)

Component TS:

message = '';
subject = '';
notes = '';

Rich editor mode:

<iu-text-area
	[(value)]="message"
	mode="editor"
	[enableShortcodes]="true"
	[insert]="true"
	placeholder="Type your message...">
</iu-text-area>

Plain textarea mode:

<iu-text-area
	[(value)]="notes"
	mode="textarea"
	[rows]="5"
	[enableShortcodes]="true">
</iu-text-area>

Input mode:

<iu-text-area
	[(value)]="subject"
	mode="input"
	label="Subject"
	[required]="true"
	[enableShortcodes]="true"
	placeholder="Enter subject...">
</iu-text-area>

4) Useful inputs / outputs

Inputs:

• value, mode, placeholder
• enableShortcodes, additionalShortcodes
• insert (image insertion in editor mode)
• rows
• label, required, requiredMessage
• sendOnEnter

Outputs:

• valueChange
• onChange
• enterPressed

5) Publish (owner)

ng build text-area-lib
cd dist/text-area-lib
npm publish --access public

Package link after publish:

https://www.npmjs.com/package/ng-text-area-ibrahim-usman

Common issues

• Dropdown not opening: ensure NgbDropdownModule is imported.
• Component not found: import TextAreaLibModule in the current module.
• Two-way binding not working: ensure FormsModule is imported.