This is an Angular2 app, and the component is simplified here as:
@Component({
selector: 'courses',
template: `
<input [(ngModel)]="wahla">
<input [(ngModel)]="wahla">
{{ wahla }}
`
})
export class CoursesComponent {
wahla = "hmm hmm ha ha";
}
I think the app works fine in one page with the two-way binding, but if I open up another tab with http://localhost:3000/ and then paste something or type something in the first page's first input box, then the second tab actually gets updated for its first input box, while the 2nd input box and the static text do not update.
For the first tab, everything is updated as expected.
Is this supposed to happen or what might be wrong? This is running using npm start
which is running a lite-server with BrowserSync.
That is a functionality of lite-server
and not a bug or something as it might appear to be one.
To make this happen lite-server
uses a javascript extention Browsersync.
On lite-server
's npm page it is mentioned like this
lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs.
and BrowserSync
puts it on their website like this
Time-saving synchronised browser testing
and this clears all the clouds of doubt
With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing,
form replication
to click mirroring, Browsersync cuts out repetitive manual tasks.
You can change the sync settings by visiting http://localhost:3001 . This is the user interface to change the browser-sync settings. Once you load http://localhost:3001, you can navigate to "Sync Options" and change the settings for "Browser-Sync" here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With