K
K
Kovalsky2019-07-30 19:59:09
Angular
Kovalsky, 2019-07-30 19:59:09

How to process XML as a template?

The bottom line is this: XML structures are stored on the server, something like this:

example.xml
<Container Id="accordion">
  <VerticalLayout Margin="true" Spacing="true" PanelCaption="Основные атрибуты">
    <HorizontalLayout Margin="false" Spacing="true">
      Some content
    </HorizontalLayout>
  </VerticalLayout>
</Container>

These structures will need to be downloaded from the server and used as a template, that is, placed in the body of some top component and rely on the fact that the components used will be correctly initialized (in this case, these are `VerticalLayout`, `HorizontalLayout` and `Container` ). By "correct" I mean that these components will be initialized in exactly the same way as if this structure were a static template in some component.
At first it seemed to me that this was about Dynamic Component Loading , but somehow I did not find information on the topic in the article. It will be generally gorgeous if you tell me how such gymnastics with templates is called in angular terminology. Thank you very much in advance!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
G
Gennady S, 2019-07-31
@lazalu68

As follows from the comments, the task is to display multiple forms. The source of the forms is not so important: they are created manually, with a toolkit, or they are generated automatically. It will be difficult to solve with dynamic loading in Angular (and even more so to bind in MV *, processing in the component's controller / model), therefore, a different approach to rendering forms by means of a statically assembled application suggests itself. Try to solve this with form metadata. Let the form be represented by a description of the fields, say, JSON or XML, and a single (and complex) Angular template will generate, roughly speaking, something like this:

<div *ngFor="let element of formElementsList">
  <div *ngIf="element.type == 'text'">
    <label>{{ element.label }}:
      <input [(ngModel)]="element.value" />
    </label>
  </div>
</div>

This approach has no restrictions, you can create a form of any complexity, with hierarchy and nesting.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question