А можно как-то добавить html + sass в директиву?

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

Ну я хочу сделать отдельный набор – директива + компонент Если добавить директиву к элементу, то должен появиться компонент на странице

Тогда стили компонента же есть, директиве то для чего?

Чтобы всунуть этот компонент на страницу

Исходник ngIf глянь

А стили компонента нельзя использовать?

А директива зачем? Можно же просто компонент использовать

Дирекива чтобы указать ВОЗЛЕ какого элемента должен появляться компонент

Конечно можно, но нужно их как-то привязать к директиве

Зачем? Они ж к компоненту относятся Опишите задачу что ли

Стили? Конечно к компоненту. Хочу сделать директиву, которую буду всатвлять в элемент, при наведении на который м не нужно будет отображать на странице tooltip

Ну, можно использовать селектор по атрибуту, если задача того требует

Ну а как добавить html и стили к директиве?

Использовать селектор по атрибуту в компоненте

Этот?

Что вы имеете в виду?

https://github.com/angular/components/blob/00e589b39070932ebf30d312cc87e8750add40b3/src/material/table/table.ts#L38

То есть вместо директивы просто создать компонент?

Да

А что это означает? table[mat-table] Если добавить атрибут mat-table в html элементе table, то появится этот компонент?

Да, всё так

А так тоже будет работать? *[mat-table]

Без звездочки только

Чтобы работало так: Если добавить атрибут mat-table в html элементе ЛЮБОМ, то появится этот компонент

Просто [mat-table] что ли? :)

Ага

Очень интересно, сейчас попробую, спасибо большое

А доступ к хосту, в котором указан этот атрибут из компонента ж можно будет получить?

Да, как обычно, через ElementRef

Не работает Error: NG0300: Multiple components match node with tagname icon-share-globe.

Ну, значит что-то еще на этом селекторе висит

У меня несколько элементов на странице, в которые я хочу добавить этот селектор. У меня там ngFor

Так и должно, несколько элементов на странице

Так не получится, селектору должен соответствовать один компонент

Тогда что делать? Модуль с директивой и компонентом что ли?

Вы тултип делаете?

Да

https://github.com/primefaces/primeng/blob/master/src/app/components/tooltip/tooltip.ts Попробуйте взять за основу

Так посмотрите, как сделаны тултипы в тайге/материале

Нет, спасибо. У меня должен быть кастомный. Мои требования: - При ховере на десктопе он должен отображаться - При клике на десктопе он не должен отображаться - При таче на мобиле он должен отображаться и пропадать через 3-4 секунды

Что-то тут очень много кода, выглядит совсем не legit, я столько кода не позволю скачивать чисто ради тултипа

Это я вам как пример дал. Там простые исходники и легко понять принцип

Но спасибо большое в любом случае

Много кода != просто

Начните с порталов, рендерить тултипы в DOM рядом с триггером - плохая идея. А там уже станет понятнее, как рендерить его из директивы

Что такое порталы?

Почему плохая?

Потому что тултипов может быть много?

Кода будет в любом ui framework много. Ибо там проработан универсальный функционал. Вы возьмите концепт.

Идея в том, чтобы в DOM дереве тултип был в корне, а не там, где был триггер его вызвавший. Такая техника, когда компонент рендерят в другом месте DOM дерева называется порталом. В CDK есть реализация именно для таких штук как тултипы - CDK Connected Overlay https://material.angular.io/cdk/overlay/overview

Например, родитель может его порезать, если будет выставлен overflow: hidden. В общем, сильная зависимость от всех предков этого элемента

А, ну да, согласен

Так а портал тогда получается разве не то же что и рендеринг компонента в DOM рядом с тригером?

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

Тогда чем блин эти непонятные порталы лучше сервисов? Сделать в корне один компонент и через сервис управлять его отображением

Тем что они рендерят любой компонент, а не один конкретный. В общем-то, всё уже написано в CDK, можно просто использовать. Можно написать своё, но я бы начал с CDK, там не так уж много проблем (конкретно в модуле overlay)

Неправда, можно в сервис передавать компонент и юзать типа <ng-container [ngTemplateOutlet]="compTemplate"></ng-container>

Ну, это и будет некоторой реализацией портала

А, лол. Я порталы не понял абсолютно, честно говоря

https://youtu.be/YQMIR01dQew

Щас гляну, спасибо большое

Ну и в доке CDK написано довольно понятно: https://material.angular.io/cdk/portal/overview

Я читал, но не понял