Using CodeLive for Angular
CodeLive makes it simple to see which Angular components are being loaded on a web page and quickly jump from a component on the page to the source code.
CodeLive is available in MyEclipse, CodeMix, and Angular IDE.
1. Setting up CodeLive
CodeLive connects the browser to the IDE. You have the option to turn on CodeLive for each Angular project.
1.1 Turning CodeLive On/Off
You have the option to turn on CodeLive for each Angular project. There are two different methods to turn this feature on or off.
From the Servers View Toolbar
Expand the Angular CLI in the Servers view, select an Angular project and click the Enable CodeLive button. This button acts as a toggle, turning CodeLive on or off. The icon is highlighted when CodeLive is enabled.
From the Servers View Context-Menu
Expand the Angular CLI in the Servers view, right-click an Angular project and select CodeLive. This menu option acts as a toggle, turning CodeLive on or off. The icon is highlighted when CodeLive is enabled.
2. Viewing Source Code
When viewing a page in the browser, you have the option to view the source files loaded in the browser and open any file in the IDE or jump directly to the source file from an element on the page.
2.1 Viewing Active Components and Opening Source Files
- View the web page in your browser.
- Click the CodeLive icon
to open the CodeLive Dashboard. The dashboard lists the active Angular components. Hover over a component and an icon appears next to the component for each file associated with the component: TypeScript 
, HTML template 
or CSS 
.
CodeLive Dashboard - Click the icon for the file you want to open. The file opens in the editor.
2.2 Jumping to Source Code from a Component
- View the web page in your browser.
- Click the Magic Wand icon
. - Hover over a component on the page to view the component name.
- Click the component to view the dashboard list filtered for the selected component.
- Hover over the component and an icon appears next to the name for each file associated with the component: TypeScript , HTML template or CSS .
- Click the icon for the file you want to open. The file opens in the editor.
3. Compatibility Matrix
Live Preview was successfully tested in the following environments.
| Chrome | Firefox | Internet Explorer | Edge | Safari | Internal Browser | |
| Win 7 64 | X | X | X | |||
| Windows 8.1 64 | X | X | X | |||
| Windows 10 64 | X | X | X | X | X | |
| Linux Mint 16/17 | X | X | ||||
| OSX 10.13.6 | X | X | ||||
| Linux Fedora 23 x64 | X | X |