Разница понятий веб сайта и веб приложения заключается не в том какой паттерн применяется при разработке, главным образом основное различие заключается в доставке контента пользователю, под сайтом мы подразумеваем веб-сервер к которому пользователь обращается по определенной ссылке и получает страницу согласно настройкам роутинга веб-сервера.
В случае же с веб приложением, пользователь при переходе на любую из ссылок веб-сервера обращается в изначальную точку входа ( как правило index.html ), и после происходит скачивание js скрипта, который в дальнейшем управляет веб приложением ( переходы по ссылкам, отображение информации, роутинг )

Говоря о стандартах, нет каких то явных стандартов построения приложении/сайтов все архитектурные решения производятся на этапе проектирования продукта, после выявления потребностей заказчика, стека технологий.

А где у тебя тут валидация? Ты объявил инпут и сделал привязку к свойству компонента, а проверять значение уже нужно внутри компонента,

Не валидной форма будет в случае если будет больше 100 символов, а при генерации компонента значение пустое, значит все условия соблюдены.

Посмотри тут
https://angular.io/guide/form-validation

В вашем случае методы getAttribute, setAttribute работают с атрибутом DOM элемента value в то время как положением ползунка управляет свойство DOM узла value.
Атрибут и свойство в данном случае никак не связаны поэтому не происходит изменение положения элемента.
Для корректной работы стоит менять свойство элемента.
document.getElementById("widthrange").value = 350

У тебя ошибка в том что ты пытаешься читать из res.name, но у тебя сам res undefined.
Для проверки на undefined достаточно сделать вот так

if (res && (res.name && res.id))