I currently have a .NET MVC application and I'm looking to integrate Angular 2 into it. The structure of my page is as follows:
<html>
<head>css imports and jquery imports</head>
<body>
<div>
a bunch of tables existing in the HTML outputed by razor
</div>
<myForm postLocation='Management/User/Add'>
<form #addForm="ngForm" (ngSubmit)="submitAddForm(addForm)">
Username:
<input ([ngModel])="user.username" type="text" required />
</form>
</myForm>
</body>
</html>
The main idea here is to create a reusable form component where form inputs are passed through ng-content. The post location is passed for the http post action. This is what the component implementation looks like:
import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Http, Response } from '@angular/http';
@Component({
selector: 'myForm',
template: `<ng-content></ng-content>`,
})
//The component that controls the datatable add form.
export class myForm {
//Constructor
constructor() {
}
//Properties
@Input() postLocation: string;
submitted = false;
//Functions
submitAddForm(form: NgForm) {
console.log(form.value);
console.log("Post Location: " + this.postLocation);
}
}
However, upon loading the page, the form disappears completely. Although the code is present in the html source, there are no errors in the console.
As an alternative approach, when I move the form and inputs to a separate cshtml file and use a controller action to bring it into the app via templateURL, the content appears on the page but the post location remains undefined.
How can I resolve this issue and make myForm work seamlessly with the existing html passed into it?
In the past, I had a prototype working in AngularJS. Now, I am contemplating transitioning to Angular 2 for a long-term solution. Do you think sticking with AngularJS would be a wise choice considering current support for Angular 2?