Angular 6 components

Question

I have around 100 screens in my application and out of which 25 are search screens. Each search screen has multiple things in common.

For instance:

Screen #1:
**Label**           **Input type**
First name:         Textbox
Date:               Date picker
Some other text boxes or radio buttons

Screen #2:  
**Label**           **Input type**  
Other name:         Textbox  
Date:               Date picker  
Some other text boxes or radio buttons

Basically, I am moving my servlet/jsp application to Angular 6. I re-searched today how I can declare components and re-use them. I haven't yet fully understood angular 6 syntax and structure and I am learning as we speak.

What I currently have in mind is:

In my @Component , i can have something like this:

@Component({
  selector: 'custom_elem',
  template: `
Generate html as per parameters provided by user
  `
export class SubscriberComponent implements OnInit {  
  @Input() parameters;
}

And I pass parameters like this for Screen #1 :

<custom_elem [parameters]="['First Name', 'textbox', 'Date', 'datepicker']"></custom_elem>

Notice that first element in the object is the label name , followed by input field type .

So the generated html from the component would be:

First Name: <input type="text" />
Date: <input type="date" />

Using this parameters I want to generate html code in my component.

Q1. Is this possible?
Q2. If yes to above, then how? [Please explain since today's my first day of experiencing angular, I have no background working with this]

Note: I also came across angular elements, and I don't want to use it because i read that it is not fully supported by browsers yet. Hence I won't be able to get it approved at my organisation.

Let me know in comments, if any further details are required. Thank you in advance.

Answer 1

请点击此链接，这将为您提供具有不同控件类型的动态表单，您只需要将QuestionBase类作为参数传递给带有动态表单的Angular可重用组件