Мне нужен раздел / компонент приложения angular для имитации адаптивного просмотра данных моей формы. Например, допустим, у меня есть приложение angular, которое имеет форму. После заполнения этой формы данные формы затем отправляются / передаются в компонент Simulate , который затем визуализирует данные формы. Компонент Simulate имеет вход, который позволяет пользователю переключаться между мобильным, планшетным ПК, средним ноутбуком или большим экраном, иными словами, данные формы должны отображаться быстро. Я знаю, что могу просто получить высоту и ширину компонента Simulate , но есть другое приложение angular, скажем Viewer-App , которое принимает только данные формы и отображает данные и это приложение отзывчиво. Поэтому, если я просто изменю высоту и / или ширину компонента, ширина и высота экрана останутся такими же, как у текущего устройства, а не у измененной высоты или ширины компонента (имитация).
Мой вопрос: как мне go о компоненте Simulate , чтобы медиазапросы или css вели себя так, как будто они отображаются на определенном экране c? Я видел много примеров использования iframe , но ни одного, где компонент передается в этот iframe и iframe отображает его. Я могу настроить URL-адрес iframe для источника Viewer-App с соответствующими параметрами маршрута для данных формы, но это будет означать создание HTTP-запроса, которого я хочу избежать.
Я использую Angular 9 с Bootstrap 4 (без части JS, только сетка).
Эта ссылка имеет решение, но использует iFrame.
Эта ссылка содержит iFrame в шаблоне компонента, но в моей ситуации это не представляется возможным.