I'd appreciate if someone could advise on my problem with Angular data binding in a component.
I have the app that loads a component dynamically into some modal using iframe. The user can open several instances of a single page, for example fill the form with data A in modal A and fill the same form with data B in modal B, so that two modals appear on the page at the same time. This is the same as if I opened single page in several browser tabs.
The problem is when I change some ngModel in one form, it automatically changes in another, so when I enter data into the form, all opened forms receive the same values.
My root component:
index.html
<html>
...
<body>
<kb-root>
</kb-root>
</body>
</html>
root.component.ts
@Component({
selector: "kb-root",
template: "<router-outlet></router-outlet>"
})
export class rootComponent {}
app.module.ts
const appRoutes: Routes = [
{ path: '', component: appComponent },
}
@NgModule({
imports: [ RouterModule.forRoot(appRoutes)] })
app.component.ts
@Component({
selector: "kb-app",
templateUrl: "..",
})
export class appComponent{}
app.desktop.ts
export class appDesktop{
parent: appComponent = null;
constructor(private inj: Injector) {
this.parent = this.inj.get(appComponent);
}
//fires on link click, where route is the href of the link
openApp(route: string) {
$("kb-app").append('<div id="' + target + '"><iframe src="/' + route+ '"></div>');
}
}
I'm new to Angular and would be grateful for any suggestions or references on preventing this behaviour.
