Gennady S

Можно предположить, что пользуетесь маршрутизатором, раз речь о переходе на другую страницу. Состояние компонентов при переходе сбрасывается, т.е. все вложенные в router-outlet компоненты инициализируются заново. Было бы сложнее и хуже, будь иначе. У Вас два пути. Во-первых, сохранить состояние компонента тем или иным образом. Во-вторых, пересмотреть подход к архитектуре приложения.

Вы можете отправить данные вверх, в родительский компонент, использовать глобальное хранилище, сервис или дать возможность пользователю сохранить данные на сервер. Что логично, когда страница отвечает за свой набор данных и при переходе на другую страницу речь идет о другом наборе данных. Если у Вас ряд страниц отвечают за связанные данные, можно исключить переход между страницами, сделать вкладки-табуляцию, например.

По моему опыту, усложнять не стоит. Постарайтесь сделать так, чтобы страница отвечала за набор данных и при переходе состояние сохранялось как состояние страницы, т.е., чтобы при нажатии F5 данные были восстановлены (и утеряны, если пользователь их не сохранил). Воспринимайте состояние страницы как такое состояние, которое должно быть возобновлено после закрытия браузера / приложения. Если несколько разделов отвечают за связанный набор данных, то данные должны храниться в родительском компоненте, а переключение компонент не должно быть переходом между страницами.

Angular не работает с Cookie, придется либо работать с Cookie напрямую, либо подключать стороннее решение, например.

Как следует из комментариев, задача отображать множественные формы. Источник форм не столько важен: создают их вручную, с инструментарием или они генерируются автоматически. Решить динамической загрузкой в Angular будет сложно (а тем более связать в MV*, обрабатывая в контроллере/модели компонента), следовательно, напрашивается другой подход к визуализации форм средствами статически-собранного приложения. Попробуйте решить это посредством мета-данных форм. Пусть форма будет представлена описанием полей, скажем, JSON или XML, и единый (и сложный) шаблон Angular будет заниматься генерацией, грубо говоря, что-то вроде этого:

formElementsList = [ { type: "text", label: "Поле ввода", value: null } ];

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

Ограничений у этого подхода нет, можно создать форму любой сложности, с иерархией и вложенностью.