Angualr within Html

ApplicationRef - applicationRef.tick ?

ChangeDetectorRef - change detectection

@ViewChildren(AuthMessageComponent) authMessageComponent: QueryList<AuthMessageComponent>

constructor(private cd: ChangeDetectorRef) {}

ngAfterViewInit(): void {
  console.log(this.email);

  if (this.authMessageComponent) {
    this.authMessageComponent.forEach((message) => {
      message.days = 30; 
    });

    this.cd.detectChanges();
  }
}

ComponentRef

@ViewChild('entry', { read : ViewContainerRef }) entry: ViewContainerRef

authComponent: ComponentRef<AuthFormComponent>;

constructor(private resolver: ComponentFactoryResolver) {
}

ngAfterContentInit(): void {
  const authFormFactory = this.resolver.resolveComponentFactory(AuthFormComponent);
  this.authComponent = this.entry.createComponent(authFormFactory);
  this.authComponent.instance.title = 'Create account';
  this.authComponent.instance.submitted.subscribe(this.loginUser);
}

loginUser(user: User) {
  console.log('Login', user);
}

destoryComponent() {
  console.log(this.authComponent);
}

ElementRef - html element, Test

@ViewChild('#email') email: ElementRef;
@ViewChildren('noTrackBy')   heroesNoTrackBy:   QueryList<ElementRef>;
    
// custom directive
constructor(el: ElementRef) {
  el.nativeElement.style.backgroundColor = 'powderblue';
}

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
 
  @Input('appHighlight') highlightColor: string;
 
  private el: HTMLElement;
 
  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }
 
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'cyan');
  }
 
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
 
  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

EmbeddedViewRef
forwardRef - DI in Action

TemplateRef - acquire the contents, structual-directives

<ng-template #tmpl>
  Tott Motto: England UK
</ng-template>
<div #entry></div>

@ViewChild('entry', { read : ViewContainerRef }) entry: ViewContainerRef
@ViewChild('tmpl') tmpl: TemplateRef<any>;

this.entry.createEmbeddedView(this.tmpl);

this.viewContainerRef.createEmbeddedView(this.templateRef);

NgModuleRef
PlatformRef - Test
resolveForwardRef
ViewRef

ViewContainerRef - dynamic component

let viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
   
let componentRef = viewContainerRef.createComponent(componentFactory);
(<AdComponent>componentRef.instance).data = adItem.data;


import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, AfterContentInit } from '@angular/core';
import { User } from './auth-form/auth-form.interface';
import { AuthFormComponent } from './auth-form/auth-form.component';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div #entry></div>
    </div>
  `
})
export class AppComponent implements AfterContentInit {
  @ViewChild('entry', { read : ViewContainerRef }) entry: ViewContainerRef

  constructor(private resolver: ComponentFactoryResolver) {
  }

  ngAfterContentInit(): void {
    const authFormFactory = this.resolver.resolveComponentFactory(AuthFormComponent);
    const component = this.entry.createComponent(authFormFactory);
  }

  loginUser(user: User) {
    console.log('Login', user);
  }
}