@ng-doc/app
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
82 lines (78 loc) • 4.29 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, ViewContainerRef, ApplicationRef, Injector, Renderer2, Component, ChangeDetectionStrategy, Input, HostBinding, Output } from '@angular/core';
import { NG_DOC_PAGE_PROCESSOR, NG_DOC_PAGE_CUSTOM_PROCESSOR } from '@ng-doc/app/tokens';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { objectKeys } from '@ng-doc/core/helpers/object-keys';
/**
* Base processor class to create a processor directive that will be used to replace
* html nodes with an Angular component.
*/
class NgDocPageProcessorComponent {
constructor() {
this.html = '';
this.afterRender = new EventEmitter();
this.processors = inject(NG_DOC_PAGE_PROCESSOR, { optional: true }) ?? [];
this.customProcessors = inject(NG_DOC_PAGE_CUSTOM_PROCESSOR, { optional: true }) ??
[];
this.elementRef = inject(ElementRef);
this.viewContainerRef = inject(ViewContainerRef);
this.applicationRef = inject(ApplicationRef);
this.injector = inject(Injector);
this.renderer = inject(Renderer2);
}
ngOnChanges({ html }) {
if (html) {
Promise.resolve().then(() => {
asArray(this.processors, this.customProcessors).forEach(this.process.bind(this));
this.applicationRef.tick();
this.afterRender.emit();
});
}
}
process(processor) {
Array.from(this.elementRef.nativeElement.querySelectorAll(processor.selector)).forEach((elementNode) => {
// check if element node has a parent node because it can be removed by another processor
if (elementNode.parentNode) {
const replaceElement = (processor.nodeToReplace && processor.nodeToReplace(elementNode, this.injector)) ??
elementNode;
const options = processor.extractOptions(elementNode, this.elementRef.nativeElement);
// create component
const componentRef = this.viewContainerRef.createComponent(processor.component, {
projectableNodes: options.content,
injector: this.injector,
});
// set component options
if (options.inputs) {
objectKeys(options.inputs).forEach((key) => options.inputs && componentRef.setInput(key, options.inputs[key]));
}
// replace element node with component node
replaceElement.parentNode?.replaceChild(componentRef.location.nativeElement, replaceElement);
componentRef.changeDetectorRef.markForCheck();
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPageProcessorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocPageProcessorComponent, isStandalone: true, selector: "[ngDocPageProcessor]", inputs: { html: ["ngDocPageProcessor", "html"] }, outputs: { afterRender: "afterRender" }, host: { properties: { "innerHTML": "this.html" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPageProcessorComponent, decorators: [{
type: Component,
args: [{
selector: '[ngDocPageProcessor]',
standalone: true,
template: '<ng-content></ng-content>',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { html: [{
type: Input,
args: [{ required: true, alias: 'ngDocPageProcessor' }]
}, {
type: HostBinding,
args: ['innerHTML']
}], afterRender: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocPageProcessorComponent };
//# sourceMappingURL=ng-doc-app-processors-page-processor.mjs.map