https://stackblitz.com/angular/eynapjneexx?file=src%2Fapp%2Fdatepicker-formats-example.ts
Вот такой вариант не подходит?

есть компоненты "auth" и "marketing" в каждом есть свой именованый аутлет, и есть главный аутлет. я не хочу давать путь к этим компонентам так как они используются только чтобы добавить хедер/футер или стили но как раз это и не отображается, только дочерний компонент на который перешли.
Я тупой или лыжи не

маркетинг компонент

в арр компоненте только обычный аутлет

Выше

идея в том чтобы изменить не отображение, а облегчить ручной ввод

то есть, когда пользователь руками вводит числа, то не нужно думать о слешах (формате)

как часто в формах с номерами - скобочки сами появляются

сделал как в доке но изза первого "#" оно не работает.
отключил хеш и все стало ок. но к сожалению мне это не подходит. придется наверное кодом делать скролл

Почему header и footer не отображаются?

маркетинг компонент

в арр компоненте только
<router-outlet></router-outlet>

я с аутлетом не работал, но то, что я увидел в документации и то, что вижу в твоём кейсе - мне очень сильно кажется, что ты не так воспринял доку. Насколько я понимаю, это чтоб показывать на одном и том же пути в браузере (url bar, вылетело из головы как оно называется) несколько изменяемых областей (router-outlets): основной и второстепенный. А ты же пытаешься как-то замансить и показыать либо одно, либо другое. Грубо говоря, или авторизированную часть, или гостевую. Попробуй обычными роутами сделать

без всяких аутлетов и пр

У меня marketing component просто добавляет стили так же как и auth, соотвественно я не хочу добавлять им урлу, но мне нужно чтобы при навигации менялись либо маркетинг на аус либо компоненты в маркетинге. так как в них разные контейнеры

я честно не понимаю.  Я визуал, мне нужно видеть и код, и что на экране)

Да, хорошо бы пример в стакблице, а то неясно какой результат нужен и почему что-то не подходит

Там похоже кто-то более "умный" свои хотелки проталкивает.