@ngneat/overview
Version:
The Template for Success in Template Management
44 lines • 5.89 kB
JavaScript
import { Directive, TemplateRef, inject, input, } from '@angular/core';
import { TeleportService } from './teleport.service';
import * as i0 from "@angular/core";
export class TeleportDirective {
constructor() {
this.teleportTo = input();
this.subscription = null;
this.tpl = inject(TemplateRef);
this.service = inject(TeleportService);
}
ngOnChanges(changes) {
// Note: Do not use `effect` to observe changes to `teleportTo`, as
// this would result in running `createEmbeddedView` within that effect.
// `createEmbeddedView` may create a component whose constructor might
// trigger another effect or write to some signals, given that we are
// operating within a reactive context.
if (changes.teleportTo && typeof this.teleportTo() === 'string') {
this.dispose();
this.subscription = this.service.outlet$(this.teleportTo()).subscribe((outlet) => {
if (outlet) {
this.viewRef = outlet.createEmbeddedView(this.tpl);
}
});
}
}
ngOnDestroy() {
this.dispose();
}
dispose() {
this.subscription?.unsubscribe();
this.subscription = null;
this.viewRef?.destroy();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: TeleportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.4", type: TeleportDirective, isStandalone: true, selector: "[teleportTo]", inputs: { teleportTo: { classPropertyName: "teleportTo", publicName: "teleportTo", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.4", ngImport: i0, type: TeleportDirective, decorators: [{
type: Directive,
args: [{
selector: '[teleportTo]',
standalone: true,
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVsZXBvcnQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmduZWF0L292ZXJ2aWV3L3NyYy9saWIvdGVsZXBvcnQvdGVsZXBvcnQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBS1QsV0FBVyxFQUNYLE1BQU0sRUFDTixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDOztBQU1yRCxNQUFNLE9BQU8saUJBQWlCO0lBSjlCO1FBS1csZUFBVSxHQUFHLEtBQUssRUFBNkIsQ0FBQztRQUdqRCxpQkFBWSxHQUF3QixJQUFJLENBQUM7UUFFekMsUUFBRyxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUMxQixZQUFPLEdBQUcsTUFBTSxDQUFDLGVBQWUsQ0FBQyxDQUFDO0tBNEIzQztJQTFCQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsbUVBQW1FO1FBQ25FLHdFQUF3RTtRQUN4RSxzRUFBc0U7UUFDdEUscUVBQXFFO1FBQ3JFLHVDQUF1QztRQUN2QyxJQUFJLE9BQU8sQ0FBQyxVQUFVLElBQUksT0FBTyxJQUFJLENBQUMsVUFBVSxFQUFFLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDaEUsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBRWYsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtnQkFDL0UsSUFBSSxNQUFNLEVBQUUsQ0FBQztvQkFDWCxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7Z0JBQ3JELENBQUM7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU8sT0FBTztRQUNiLElBQUksQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLENBQUM7UUFDakMsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDekIsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsQ0FBQztJQUMxQixDQUFDOzhHQWxDVSxpQkFBaUI7a0dBQWpCLGlCQUFpQjs7MkZBQWpCLGlCQUFpQjtrQkFKN0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFbWJlZGRlZFZpZXdSZWYsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBUZW1wbGF0ZVJlZixcbiAgaW5qZWN0LFxuICBpbnB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgVGVsZXBvcnRTZXJ2aWNlIH0gZnJvbSAnLi90ZWxlcG9ydC5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3RlbGVwb3J0VG9dJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgVGVsZXBvcnREaXJlY3RpdmUgaW1wbGVtZW50cyBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIHJlYWRvbmx5IHRlbGVwb3J0VG8gPSBpbnB1dDxzdHJpbmcgfCBudWxsIHwgdW5kZWZpbmVkPigpO1xuXG4gIHByaXZhdGUgdmlld1JlZjogRW1iZWRkZWRWaWV3UmVmPGFueT47XG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb24gfCBudWxsID0gbnVsbDtcblxuICBwcml2YXRlIHRwbCA9IGluamVjdChUZW1wbGF0ZVJlZik7XG4gIHByaXZhdGUgc2VydmljZSA9IGluamVjdChUZWxlcG9ydFNlcnZpY2UpO1xuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAvLyBOb3RlOiBEbyBub3QgdXNlIGBlZmZlY3RgIHRvIG9ic2VydmUgY2hhbmdlcyB0byBgdGVsZXBvcnRUb2AsIGFzXG4gICAgLy8gdGhpcyB3b3VsZCByZXN1bHQgaW4gcnVubmluZyBgY3JlYXRlRW1iZWRkZWRWaWV3YCB3aXRoaW4gdGhhdCBlZmZlY3QuXG4gICAgLy8gYGNyZWF0ZUVtYmVkZGVkVmlld2AgbWF5IGNyZWF0ZSBhIGNvbXBvbmVudCB3aG9zZSBjb25zdHJ1Y3RvciBtaWdodFxuICAgIC8vIHRyaWdnZXIgYW5vdGhlciBlZmZlY3Qgb3Igd3JpdGUgdG8gc29tZSBzaWduYWxzLCBnaXZlbiB0aGF0IHdlIGFyZVxuICAgIC8vIG9wZXJhdGluZyB3aXRoaW4gYSByZWFjdGl2ZSBjb250ZXh0LlxuICAgIGlmIChjaGFuZ2VzLnRlbGVwb3J0VG8gJiYgdHlwZW9mIHRoaXMudGVsZXBvcnRUbygpID09PSAnc3RyaW5nJykge1xuICAgICAgdGhpcy5kaXNwb3NlKCk7XG5cbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5zZXJ2aWNlLm91dGxldCQodGhpcy50ZWxlcG9ydFRvKCkpLnN1YnNjcmliZSgob3V0bGV0KSA9PiB7XG4gICAgICAgIGlmIChvdXRsZXQpIHtcbiAgICAgICAgICB0aGlzLnZpZXdSZWYgPSBvdXRsZXQuY3JlYXRlRW1iZWRkZWRWaWV3KHRoaXMudHBsKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5kaXNwb3NlKCk7XG4gIH1cblxuICBwcml2YXRlIGRpc3Bvc2UoKTogdm9pZCB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5zdWJzY3JpcHRpb24gPSBudWxsO1xuICAgIHRoaXMudmlld1JlZj8uZGVzdHJveSgpO1xuICB9XG59XG4iXX0=