重用角度组件（但修改Dom元素）

Question

So, I created an Angular component, which I want to reuse within some of my pages that I will be creating. Essentially, it is a form box with different configurations (input fields, buttons, check boxes, etc.). Based on certain section, I want to change the content of the form box, however, I still want to keep the same layout of the form. So, for example, I want to apply the same css properties of the form and of the form relative to the whole page.

For certain pages of the application I am building, I reuse the same form 3 or 4 times, however, I change the content of what is in each instance of the form. I want to be able to call the selector( ), but I want to be able to change the content of what is in that selector. This way it will make creating the application much faster.

The content of the forms (like the input fields and buttons) are placed in different components. I want to insert a specific content component within the one instance of the form component. Then insert another content component within another instance of a form component.

Any easy way of doing this ? Any help or guidance would be appreciated.

This picture is a mock-up of what ideally I want a page to look like. The first form has somewhat different content, but essentially the same component with some adjustments.

Answer 1

I feel like what you're trying to do could get messy quickly, but you could use inputs to change the behaviour of the form.

For example, if you wanted to hide or show a textbox in the form, you could have

<input type="text" *ngIf="showTextbox" /> 

in your html and

@Input() showTextbox : boolean = true; // Defaulted to true

and then specify whether you want the textbox each time you use the component.