Here is an article to show how to modify a component in the browser in real-time. Do this in cases where you want to trigger a localized update and don’t want to make changes in your code editor. This avoids potentially refreshing the application and requiring you to reset the state. Modifying the component in the browser is also akin to editing CSS properties using the dev tools; it is fast and doesn’t require you to revert edits in a file if the changes don’t work out.
Here are the steps:
- Using the Chrome browser, access the dev tools by pressing F12 on your keyboard.
- Under the Elements tab, select the element with the mouse.
- Go to the Console tab, type “$0”, and verify it is the correct component you selected.
- Still in the Console tab, type “ng” to expose several Angular methods to run in the browser in real-time.
- Assign the component to a browser variable by typing this in the console: const checkboxComp = ng.getComponent($0)
- Modify a public property of the component that you want to want to see in the view.
- Run the change detection in order to see the changes by typing this in the console: ng.applyChanges(checkboxComp)
This will only work in development mode. Once you build the application for production, the “ng” API is no longer accessible from within the dev tools.
I also put a quick video showing the process. Enjoy!
