Explanation on how to register a TemplateRef in Global configuration

[lppedd]

What problem does this feature solve?

Some components, like NzSpinComponent, allow specifying a TemplateRef<T> instance via the new global configuration.
However, for users it might not be clear how to programmatically create it in NgModule context (in fact it was a bit of a surprise to me too). The following is a snippet which can be integrated to show that.

app.module.ts

@Component({
  template: `
    <ng-template #nzIndicatorTpl>
      <span class="ant-spin-dot">
        <i nz-icon [nzType]="'loading'"></i>
      </span>
    </ng-template>
  `
})
export class SpinTplComponent {
  @ViewChild('nzIndicatorTpl', { static: true })
  nzIndicator!: TemplateRef<void>;
}

const nzConfigFactory = (
  injector: Injector,
  resolver: ComponentFactoryResolver
): NzConfig => {
  const factory = resolver.resolveComponentFactory(SpinTplComponent);
  const { nzIndicator } = factory.create(injector).instance;
  return {
    spin: {
      nzIndicator
    }
  };
};

@NgModule({
  declarations: [
    AppComponent,
    SpinTplComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgZorroAntdModule,
    ...
  ],
  providers: [
    {
      provide: NZ_CONFIG,
      useFactory: nzConfigFactory,
      deps: [Injector, ComponentFactoryResolver]
    },
    ...
  ],
  entryComponents: [SpinTplComponent, ...]
})
export class AppModule {}

Points to remember:

• exporting the component is required for AOT compatibility
• the component must be present in declarations and entryComponents

What does the proposed API look like?

Not needed.

[wzhudev]

This looks great. Could you please submit a PR to change the Global Configuration chapter of the official doc? You could make this approach more generic by renaming SpinTplComponent to GlobalTemplateComponent.

And, there's a simpler approach. In App component:

export class AppComponent implements OnInit {
 @ViewChild('nzIndicatorTpl', { static: true }) nzIndicator!: TemplateRef<void>;

  constructor(private nzConfigService: NzConfigService) {}

  ngOnInit(): void {
    this.nzConfigService.set('spin', { nzIndicator: this.nzIndicator });
  }
}

But this approach makes AppComponent bit of verbose.