In addition to the NG-ALAIN base component and the @delon business component, sometimes we need to reference other external class libraries, the following is how to use the rich text component ngx-tinymce:
Angular Component
Installing dependencies
yarn add ngx-tinymce
Import module
You may need to use rich editor in all submodules, as it's recommended to import and export them in the SharedModule
module.
// #region third libs
import { NgxTinymceModule } from 'ngx-tinymce';
const THIRDMODULES = [ NgxTinymceModule ];
// #endregion
The region: third libs
region is a coding convention for NG-ALAIN, register all third-party components into the THIRDMODULES
variable, for more coding conventions, refer to Style Guide.
For some third-party components, may be required global configuration. It's recommended to register in the root module, for example:
import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
imports: [
BrowserModule,
NgxTinymceModule.forRoot({
baseURL: '//cdn.bootcss.com/tinymce/4.7.13/'
})
]
})
export class AppModule { }
Next you can use ngx-tinymce
in any submodule:
<tinymce [(ngModel)]="html"></tinymce>
Non-Angular Component
Referencing a non-Angular component is actually loading a JavaScript class library file, such as the QR code library qrious:
Installing dependencies
yarn add qrious
Import Scripts
Add qrious.min.js
to the scripts
node in angular.json
:
"scripts": [
"node_modules/qrious/dist/qrious.min.js"
]
If the third-party library requires additional styles, you also need to add a path to styles
.
Note: You need to re-run ng s
.
Lazy loading script
The above import script method will package the code directly into scripts.js
, which will cause the scripts.js
to become larger. NG-ALAIN provides another delayed loading CDN library script solution for low-usage services. (Example: zip compression), you can use LazyService to delay loading remote CDN scripts.
How to use
Angular is using TypeScript language, and all types must be clearly defined to be used. For details, please refer to Angular How to use third-party libraries.
A sample code for the call:
declare var QRious: any;
@Component()
export class DEMOComponent {
constructor() {
const qr = new QRious();
}
}