[Proposal] Realtime update style without reload browser or rebuild or save file, need help!

Thank you for reading my issue, I know that Angular team have a lot of job to do. And they are busy to complete Ivy. But I only need your small help to suggest me a direction to finish my plugin. I will close it a soon as possible if I have solution or angular team don’t want to see this issue.

Why you need this issue?

you can look at this image and look at video to see how fast it can update.

imagine no more file saving or page reloading just to see how single update affects web page, realtime update style in browser immediately, as you type… How many time you can save? how fast we can build our application?

Base on this idea Livestyle. I’m writing an extension for VS code and Chrome that can help Angular developer (or frontend developer) can style faster. It call LiveStyle that can updates CSS in browser immediately, as you type. No more file saving or page reloading just to see how single update affects web page.

step 1) VSCode extensions will record your new style code in VS code step 2) VSCode extensions will complie it in css step 3) VSCode extensions will host a server and use socket.io to send data to chrome extension. Chrome extension will adding new style to your website. 3 step above is just take 1 second, and it will update every second I make changes.

I having problem in step 2

How you need this issue?

Basicly I can do this with global style. But with the component, these styles are post-processed so that each selector is augmented with _nghost or _ngcontent attribute selectors. Now if I want to apply template style to necessary component. I need to comply style file (css, scss, etc …) from component to css with that attribute above with it. But I dont know how?

What do you need?

1. Comply task: How can I comply component style file with _nghost and _ngcontent attribute selectors? can I borrow angular internal compiler to do this task?
2. Detect attributes task:_nghost or _ngcontent is random on the browser after every build, how can I get that info?

Please help me, I know that it’s asking too much but this can save our day. We can spend more time for ourself, to relax, to play, to go out with our family, or to thinking. No more hard work and waiting reload angular app just for change text color. Please help me…

Thank you Angular team,

If someone think it is good idea, please give me a 👍

Have a nice day to all of you.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular’s feature request process in our documentation.

[mlc-mlapis]

@hiepxanh There 4 possibilities how Angular works with styles on components level (https://angular.io/api/core/ViewEncapsulation) and working with them depends on it.

enum ViewEncapsulation {
  Emulated: 0
  Native: 1
  None: 2
  ShadowDom: 3
}