I can't use any templates or components from html folder in my angular metronic version
please let me know how can i use all features and templates that i purchase from you
for example how can i use EDITORS or jsTree
you give me things like magic i need to use it please let me know how
Replies (7)
Hi Aly Mohamed
Please check this guide for the CKEditor integration with Angular.
https://ckeditor.com/ckeditor-5/angular/#code-example
Hi Aly Mohamed,
here are some steps and considerations:
For features like jQuery plugin jsTree, you need to include the JavaScript files and initialize them in your Angular components. This involves importing the scripts in your angular.json file and using Angular's lifecycle hooks to initialize the plugins.
Some Metronic features might have Angular-compatible versions or equivalents. Look for Angular modules or components that provide similar functionality.
Regarding integrating libraries like PrimeNG or Syncfusion:
- Make sure that the third-party libraries are compatible with your Angular version.
- While third-party libraries are usually optimized, adding many dependencies can increase the bundle size and impact performance. Always test the performance impact before fully integrating a new library.
To mitigate risks, you can:
- Use lazy loading for heavy components. (https://v17.angular.io/guide/lazy-loading-ngmodules)
- Regularly update dependencies.
If you need further assistance, feel free to ask.
thanks for speed response now i need how can i test the performance before integrate any third part
also in the future metronic will fully support angular with all html folder components ? if yes i can use third part until metronic release fully supported angular version
i am go with instructions of how initialize js files in my angular
i am do it on ckeditor and successfully initialized and console it this object
accessibility
:
ph {keystrokeInfos: Map(2), _editor: Ux}
commands
:
sh {_commands: Map(58)}
config
:
Pn {_config: {…}}
conversion
:
pl {_helpers: Map(4), _downcast: Array(2), _upcast: Array(1)}
data
:
gl {model: eh, mapper: Sa, downcastDispatcher: Va, upcastDispatcher: dl, viewDocument: Dr, …}
editing
:
Rc {model: eh, view: ga, mapper: Sa, downcastDispatcher: Va, Symbol(listeningTo): {…}}
id
:
"e18b42c2c6e0ba5ae498d2826fcbec4f6"
keystrokes
:
bi {_listener: {…}, editor: Ux}
locale
:
Qo {uiLanguage: 'en', contentLanguage: 'en', uiLanguageDirection: 'ltr', contentLanguageDirection: 'ltr', translations: undefined, …}
model
:
eh {markers: Bd, document: vd, schema: Hc, _pendingChanges: Array(0), _currentWriter: null, …}
plugins
:
ui {_plugins: Map(216), _context: Ux, _availablePlugins: Map(108), _contextPlugins: Map(0)}
state
:
(...)
t
:
(t,e)=>this._t(t,e)
ui
:
$p {isReady: true, _editableElementsMap: Map(1), _focusableToolbarDefinitions: Array(3), editor: Ux, componentFactory: hg, …}
_context
:
fi {_contextOwner: Ux, config: Pn, plugins: ui, locale: Qo, t: ƒ, …}
_readOnlyLocks
:
Set(0) {size: 0}
Symbol(emitterId)
:
"e76fc8febc3adddfc3921dd8b945f4dbd"
Symbol(listeningTo)
:
{e76fc8febc3adddfc3921dd8b945f4dbd: {…}}
_events
:
{ready: {…}, destroy: {…}, change:isReadOnly: {…}, change: {…}, addRoot: {…}}
Symbol(boundObservables)
:
Map(0) {size: 0}
Symbol(boundProperties)
:
Map(0) {size: 0}
Symbol(observableProperties)
:
Map(1) {'state' => 'ready'}
isReadOnly
:
(...)
get state
:
()=>n.get(t)
set state
:
ƒ set(e)
this means ckeditro alredy initialize but UI not appear like i am expect although i am take it from html documentation
??????
Hi Aly Mohamed
Thank you for your interest in Metronic.
Please note that some pages from the HTML version might not be available in the Angular version. However, the CSS styles from the HTML version are already integrated into Angular. The components in the HTML version are static and non-functional. To achieve the same appearance in Angular, you can copy the HTML of a component from the HTML version and paste it into the Angular component. The actual functionality and implementation need to be developed by the customer to meet their specific business requirements.
By default, jQuery-based features are not included in the Angular version. As a result, components such as EDITORS or jsTree are not available.
You can try to install jsTree.
npm install --save jstree jqueryInclude jsTree and jQuery in angular.json:
Modify your angular.json to include jsTree and jQuery.
"styles": [
"src/styles.css",
"node_modules/jstree/dist/themes/default/style.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jstree/dist/jstree.min.js"
]Create a jsTree Component:
Create a component for jsTree (e.g., jstree.component.ts).
import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core";
declare var $: any;
@Component({
selector: "app-jstree",
template: "<div #jsTree></div>"
})
export class JsTreeComponent implements AfterViewInit {
@ViewChild("jsTree", { static: true }) jsTreeElement: ElementRef;
ngAfterViewInit(): void {
$(this.jsTreeElement.nativeElement).jstree({
"core": {
"data": [
{ "text": "Root node", "children": [
{ "text": "Child node 1" },
{ "text": "Child node 2" }
]}
]
}
});
$(this.jsTreeElement.nativeElement).on("changed.jstree", function (e, data) {
console.log(data.selected);
});
}
}Use the jsTree Component:
Add the jsTree component to your main component template (e.g., app.component.html).
<app-jstree></app-jstree>If you need further clarification, please let us know.
okay now i can not use all you produce for me in angular version directly,
what about if i use third party like PrimeNG or syncfusion or ....etc
- is there any risk in the future ?
- is there any kind of risk if i integrate any third party library in theme ?
please let me know .
when i build is there any risk on performance of my app ?
