CODEWITHSUNDEEP
asp.net-mvcangulartypescriptrazorangular2-components
SolidSnake4444
SolidSnake4444

Reputation: 3587

Angular 2 - Unable to pass data into root component using ng-content and binding. Goal: Reuseable form component

I have an existing .NET MVC application in which I would like to use Angular 2 in. I have a page similar to this (shorthand):

<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 gist is that I'm trying to make a reusable form component that has the form inputs passed in via ng-content. I pass in the post location so the http post knows where to post. The component looks like this:

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);
    }
}

When the page loads, the whole form disappears from the page. If I view source, I can still see the code in the html. No errors in the console.

If I instead bring my form and inputs into a separate cshtml file and make a controller action to pull it into the app via templateURL, I see the content on the page but post location is not filled in. It's undefined.

How can I get this to work? I want the myForm from to work with the existing html on the page that I'm passing in.

I had a mockup working in AngularJS. I am at a point where I'm redesigning the front end js framework for an application that will be used at least for another ten years. I feel like using angularjs now might be a poor decision if angular 2 is what is supported now.

Upvotes: 1

Views: 284

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

Transclusion is currently not supported at the root component, but it is planned.

See also https://github.com/angular/angular/issues/4946

Upvotes: 1

Related Questions