Regarding WHY...
Since you were also wondering WHY you might want to inject a static structure, Angular Material does this quite often to provide configuration to components.
eg. for Chips control:
@NgModule({ providers: [ { provide: MAT_CHIPS_DEFAULT_OPTIONS, useValue: { separatorKeyCodes: [ENTER, COMMA] } } ]})
No need to understand what this data represents, just realize that you're injecting a token MAT_CHIPS_DEFAULT_OPTIONS
with value { separatorKeyCodes: [ENTER, COMMA] }
This will be inherited from your AppModule, or from whichever module or component you define it - just like any other injectable service would. This could equally be in your @Component
or @Directive
definition to provide config just for a single component (and its children).
Of course when a different module, or component in your application needs different configuration you inject it there and only the child components will inherit it.
To be honest it may seem a pain having to do this, instead of just setting a value on a component, but that's the way it works for a lot of Angular Material controls. And of course the benefit is you do it only once and everything inherits it - and perhaps most notably these are usually parameters you don't typically need to change.