How to globally change display density based on different screen resolution
Hello Pavan,
Thank you for your patience while I was looking into this matter for you.
I have been looking into your question and what I could say is that at this point we do not provide globally changing the display density based on different screen resolutions out of the box.
Having this in mind, what I could suggest, in order to have this feature implemented in any of our future releases, is logging this as a feature request in our GitHub repository here. Remember when submitting your idea to explain the context in which this feature would be used and why it is needed.
This will give you the opportunity do directly communicate with our development team regarding this matter and get notifications whenever new information is available.
However, although we do not expose such a feature, a possible approach which could help you achieve your requirement is setting a token in the providers array of the app.module.ts file and using a BehaviorSubject for the useValue provider key. Then in the app.component.ts file I could suggest using a HostListener for the window:resize event and implementing the logic for changing the display density on zoom-in and zoom-out. There you can access and update the value of the BehaviorSubject and then subscribe and bind the changed value to the displayDensity property of the Ignite UI for Angular components.
Additionally, in order to demonstrate my suggestion, I have prepared a small sample and it could be found here.
Please test it on your side and let me know if you need any further assistance regarding this matter.
Sincerely,Riva IvanovaEntry Level Software Developer
Thank you for posting in our community!
This is an initial update to let you know that I am currently in the process of creating a sample for you, illustrating how such behavior could be achieved. I will keep you posted on my progress.