ViewRef & Renderer2

// ❌ Direct DOM manipulation — breaks SSR, bypasses Angular's security pipeline
@Component({ template: `<div #host></div>` })
export class OldComponent {
  @ViewChild('host') host!: ElementRef;
 
  showMessage(): void {
    const div = document.createElement('div');
    div.className = 'toast';
    div.innerHTML = `<strong>Success!</strong>`;     // XSS risk
    this.host.nativeElement.appendChild(div);
    setTimeout(() => div.remove(), 3000);
  }
}

// Old approach (Angular 2–12) — required ComponentFactoryResolver
// Still works but deprecated — ComponentFactory is no longer needed
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
 
@Component({ template: `<ng-container #host></ng-container>` })
export class OldParent {
  @ViewChild('host', { read: ViewContainerRef }) host!: ViewContainerRef;
  private resolver = inject(ComponentFactoryResolver);  // deprecated
 
  show(): void {
    const factory = this.resolver.resolveComponentFactory(ToastComponent);
    this.host.createComponent(factory);   // factory-based — deprecated
  }
}

// Modern approach (Angular 13+ — recommended)
// Pass the component class directly — no factory needed
import { ViewContainerRef, inject } from '@angular/core';
 
@Component({ template: `<ng-container #host></ng-container>` })
export class ModernParent {
  @ViewChild('host', { read: ViewContainerRef }) host!: ViewContainerRef;
 
  show(): void {
    this.host.createComponent(ToastComponent);   // class directly — clean
  }
}

import {
  Component, ViewContainerRef, ViewChild,
  inject, Type, ComponentRef, signal
} from '@angular/core';
 
@Component({
  selector: 'app-toast-host',
  standalone: true,
  template: `<ng-container #toastContainer />`,
})
export class ToastHostComponent {
  @ViewChild('toastContainer', { read: ViewContainerRef })
  private container!: ViewContainerRef;
 
  private refs = new Map<string, ComponentRef<ToastComponent>>();
 
  show(message: string, type: 'success' | 'error'): void {
    const ref = this.container.createComponent(ToastComponent, {
      // Optional: pass a custom injector so the toast can DI app services
      injector: this.container.injector,
    });
 
    // Set inputs on the dynamically created component
    ref.setInput('message', message);
    ref.setInput('type', type);
 
    const id = crypto.randomUUID();
    this.refs.set(id, ref);
 
    // Auto-remove after 3 seconds
    setTimeout(() => this.dismiss(id), 3000);
  }
 
  dismiss(id: string): void {
    const ref = this.refs.get(id);
    if (ref) {
      ref.destroy();          // destroys the component and removes its DOM
      this.refs.delete(id);
    }
  }
}

const vcr: ViewContainerRef = ...;
 
vcr.createComponent(MyComp)           // create + insert at end
vcr.createComponent(MyComp, { index: 0 })  // create + insert at position 0
vcr.insert(viewRef)                   // insert an existing ViewRef
vcr.insert(viewRef, 0)                // insert at specific index
vcr.move(viewRef, 2)                  // move an existing view to index 2
vcr.detach(0)                         // remove from CD tree but KEEP DOM
vcr.remove(0)                         // remove and DESTROY the view
vcr.clear()                           // destroy all views in this container
vcr.length                            // number of views currently hosted
vcr.get(index)                        // get ViewRef at index

@Component({
  selector: 'app-conditional-renderer',
  standalone: true,
  template: `
    <ng-template #loadingTmpl>
      <div class="spinner">Loading…</div>
    </ng-template>
 
    <ng-template #errorTmpl let-message="message">
      <div class="error">{{ message }}</div>
    </ng-template>
 
    <ng-container #outlet />
  `,
})
export class ConditionalRendererComponent {
  @ViewChild('loadingTmpl') loadingRef!: TemplateRef<void>;
  @ViewChild('errorTmpl') errorRef!: TemplateRef<{ message: string }>;
  @ViewChild('outlet', { read: ViewContainerRef }) outlet!: ViewContainerRef;
 
  showLoading(): void {
    this.outlet.clear();
    this.outlet.createEmbeddedView(this.loadingRef);
  }
 
  showError(message: string): void {
    this.outlet.clear();
    // Context object provides values for `let-message` in the template
    this.outlet.createEmbeddedView(this.errorRef, { message });
  }
 
  clear(): void {
    this.outlet.clear();
  }
}

const ref: ComponentRef<DialogComponent> = vcr.createComponent(DialogComponent);
 
// Set inputs (works for both @Input() and input() signal inputs)
ref.setInput('title', 'Confirm deletion');
ref.setInput('message', 'Are you sure?');
 
// Read the component instance
ref.instance.confirmClicked.subscribe(() => { /* ... */ });
 
// Manually trigger CD (needed if you changed instance properties directly)
ref.changeDetectorRef.detectChanges();
 
// Get the host element
const el: ElementRef = ref.location;
 
// Destroy when done — removes DOM, calls ngOnDestroy
ref.destroy();

import { Directive, ElementRef, Renderer2, inject, HostListener } from '@angular/core';
 
@Directive({
  selector: '[appTooltip]',
  standalone: true,
})
export class TooltipDirective {
  private el = inject(ElementRef);
  private renderer = inject(Renderer2);
  private tooltipEl: HTMLElement | null = null;
 
  @HostListener('mouseenter')
  onEnter(): void {
    this.tooltipEl = this.renderer.createElement('div');
    this.renderer.addClass(this.tooltipEl, 'tooltip');
    this.renderer.setStyle(this.tooltipEl, 'position', 'absolute');
    this.renderer.setProperty(this.tooltipEl, 'textContent', 'Tooltip text');
    this.renderer.appendChild(this.el.nativeElement, this.tooltipEl);
  }
 
  @HostListener('mouseleave')
  onLeave(): void {
    if (this.tooltipEl) {
      this.renderer.removeChild(this.el.nativeElement, this.tooltipEl);
      this.tooltipEl = null;
    }
  }
}

const r: Renderer2 = inject(Renderer2);
 
// Create / destroy elements
const el = r.createElement('div');       // creates <div>
const txt = r.createText('Hello');       // creates text node
const comment = r.createComment('...');  // creates <!-- --> node
r.destroyNode(el);                       // marks for cleanup
 
// Tree structure
r.appendChild(parent, child);
r.insertBefore(parent, child, refNode);
r.removeChild(parent, child);
 
// Attributes and properties
r.setAttribute(el, 'aria-label', 'Close');
r.removeAttribute(el, 'aria-label');
r.setProperty(el, 'textContent', 'Hello');    // DOM property (not attribute)
 
// Classes and styles
r.addClass(el, 'active');
r.removeClass(el, 'active');
r.setStyle(el, 'color', 'red');
r.setStyle(el, 'color', 'red', RendererStyleFlags2.Important);
r.removeStyle(el, 'color');
 
// Event listeners
const unlisten = r.listen(el, 'click', (e) => console.log(e));
unlisten();   // unregister the listener

// overlay.service.ts
import { Injectable, ApplicationRef, inject, Type, ComponentRef, createComponent, EnvironmentInjector } from '@angular/core';
 
@Injectable({ providedIn: 'root' })
export class OverlayService {
  private appRef = inject(ApplicationRef);
  private injector = inject(EnvironmentInjector);
 
  open<T>(component: Type<T>): ComponentRef<T> {
    // Create component outside any ViewContainerRef
    const ref = createComponent(component, {
      environmentInjector: this.injector,
    });
 
    // Attach to ApplicationRef so it participates in CD
    this.appRef.attachView(ref.hostView);
 
    // Insert native element into document body
    const domEl = (ref.hostView as any).rootNodes[0] as HTMLElement;
    document.body.appendChild(domEl);
 
    ref.onDestroy(() => {
      this.appRef.detachView(ref.hostView);
      domEl.remove();
    });
 
    return ref;
  }
}
 
// Usage
const toastRef = overlay.open(ToastComponent);
toastRef.setInput('message', 'Saved!');
setTimeout(() => toastRef.destroy(), 3000);

@Component({ /* ... */ })
export class TabPanelComponent {
  @ViewChild('outlet', { read: ViewContainerRef }) outlet!: ViewContainerRef;
 
  private viewCache = new Map<string, EmbeddedViewRef<any>>();
 
  @ContentChildren(TabComponent) tabs!: QueryList<TabComponent>;
 
  activate(tab: TabComponent): void {
    // Detach all currently active views
    this.outlet.detach();
 
    if (this.viewCache.has(tab.id)) {
      // Re-insert the cached view — no recreation overhead
      this.outlet.insert(this.viewCache.get(tab.id)!);
    } else {
      // First activation — create and cache
      const ref = this.outlet.createEmbeddedView(tab.contentTemplate);
      this.viewCache.set(tab.id, ref);
    }
  }
}

// ❌ Fails during SSR — style doesn't exist on server DOM emulation
@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  el = inject(ElementRef);
  ngOnInit() { this.el.nativeElement.style.background = 'yellow'; }
}
 
// ✅ Renderer2 — works in all Angular rendering contexts
@Directive({ selector: '[appHighlight]', standalone: true })
export class HighlightDirective {
  el = inject(ElementRef);
  r = inject(Renderer2);
  ngOnInit() { this.r.setStyle(this.el.nativeElement, 'background', 'yellow'); }
}

// ❌ ComponentRef leaks — never destroyed
@Component({ /* ... */ })
export class ParentComponent {
  ngOnInit(): void {
    // createComponent() via ApplicationRef but never tracking the ref
    const ref = createComponent(ToastComponent, { environmentInjector: this.injector });
    this.appRef.attachView(ref.hostView);
    // ref is lost — will never be destroyed
  }
}
 
// ✅ Track refs and destroy on ngOnDestroy
export class ParentComponent implements OnDestroy {
  private toastRef?: ComponentRef<ToastComponent>;
 
  show(): void {
    this.toastRef = createComponent(ToastComponent, { ... });
  }
 
  ngOnDestroy(): void {
    this.toastRef?.destroy();
  }
}

// ❌ host is undefined in ngOnInit
@Component({ template: `<ng-container #host />` })
export class WrongComponent implements OnInit {
  @ViewChild('host', { read: ViewContainerRef }) host!: ViewContainerRef;
 
  ngOnInit(): void {
    this.host.createComponent(MyComp);   // TypeError: cannot call createComponent of undefined
  }
}
 
// ✅ Wait for ngAfterViewInit
export class CorrectComponent implements AfterViewInit {
  @ViewChild('host', { read: ViewContainerRef }) host!: ViewContainerRef;
 
  ngAfterViewInit(): void {
    this.host.createComponent(MyComp);   // safe — host is initialized
  }
}