I once encountered a similar issue where I had to use a component multiple times in the application and bind specific configurations to it. Whenever there was a need to change these configurations, I had to manually go through the entire application to make the edits.
To solve this problem, I opted for using an interface called "NgLoadingConfigInterface":
export interface NgLoadingConfigInterface {
threshold: 2000,
timeout: 4000,
zIndex: 9999,
}
By defining the common attributes in this interface, it made it easier to manage them across the application.
Whenever the "Ng4-loading" component is used, you can implement this interface as shown below:
@Component({
...
})
export class SomeComponent implements NgLoadingConfigInterface {
....
}
In the template, simply bind the attributes of the Ng4-loading component to the attributes defined in the interface.
<ng4-loading-spinner [threshold]="threshold" [timeout]="timeout" [zIndex]="zIndex">
<ng4-loading-spinner>
This approach allows you to update the values in the interface, subsequently reflecting the changes throughout the application.
Alternatively, you can encapsulate the component within another component and pass the configurable attributes using @Input annotations.