Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: explain how to submit TemplateRef instances in global config #4321

Merged
merged 1 commit into from
Oct 22, 2019
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 80 additions & 1 deletion docs/global-config.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,86 @@ export class AppModule {}

These global configuration would be injected into a service named `NzConfigService` and gets stored.

## Dynamically Chaing Configs
### Provide Template Instances

Being global configuration's entries may accept `TemplateRef<T>` instances, we need a way to create
them at application start-up, or, we have to submit them via `NzConfigService`.

The simpler approach is via `NzConfigService` in the root Component.

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

constructor(private readonly nzConfigService: NzConfigService) {}

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

However this causes the configuration to be spread around.<br>
To solve that, at `NgModule` level we can use a `FactoryProvider` instead of a `ValueProvider` (shown above).

```typescript
// The module-level Component which contains template references.
// Exporting is required for AOT compatibility
@Component({
template: `
<ng-template #nzIndicatorTpl>
<span class="ant-spin-dot">
<i nz-icon [nzType]="'loading'"></i>
</span>
</ng-template>
`
})
export class GlobalTemplatesComponent {
@ViewChild('nzIndicatorTpl', { static: true })
nzIndicator!: TemplateRef<void>;
}

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

@NgModule({
imports: [...],
declarations: [
AppComponent,
GlobalTemplatesComponent,
...
],
providers: [
{ // The FactoryProvider
provide: NZ_CONFIG,
useFactory: nzConfigFactory,
deps: [Injector, ComponentFactoryResolver]
},
...
],
entryComponents: [
// Must be present here to be resolved by ComponentFactoryResolver.
// Using Ivy it is not required
GlobalTemplatesComponent,
...
]
})
export class AppModule {}
```

## Dynamically Change Configurations

You can change the global config of a specific component by calling the `set` method of `NzConfigService`. For example, if you want to make all buttons to be barge in size by default, you should:

Expand Down