CODEWITHSUNDEEP
javaangularjsp
Wolf359
Wolf359

Reputation: 2715

Angular 6: How to include html file into component?

In a servlet environment we can include any jsp like this :

<%@include file=" 'path-to-jsp' " %>

In my angular project I have a html form with many components in it. I want to include this form in 2 components (create and update).

user-form.html :

<input type=".."...>
<input type=".."...>
<input type=".."...>
<select>...

create-user.component.html:

<form>
   // insert content of 'user-form.html' at compile time
   <button>Create User</button>
</form>

update-user.component.html:

<form>
   // insert content of 'user-form.html' at compile time
   <button>Update User</button>
</form>

Is there a way of accomplishing this in Angular 2+ ?

note: I use reactive forms

Upvotes: 1

Views: 7329

Answers (2)

Farrukh Shahzad
Farrukh Shahzad

Reputation: 51

You can add this user-form as a template in your view. in this way binding will also work Like the following example

<user-form [state] = 'Create/Update'></user-form>
<button>Create/Update</button>

and the user component will take the state as an input to check whether it's in edit or create state. And mention the selector as "user-form" in the UserFormComponent and also include UserFormComponent in your current component.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222592

You could use [innerHtml] in a create-user.component with something like 

@Component({
    selector: 'my-template',
    template: `
<div [innerHtml]="myTemplate">
</div>
`})
export public class MyTemplate {
    private myTemplate: any = "";
    @Input() url: string;
    constructor(http: Http) {
        this.myTemplate = yourHTMl); //Load it using http
    }
}

Upvotes: 1

Related Questions