Передача входных свойств через угловой компонент с помощью селектора класса CSS

Question

У меня есть компонент с селектором класса. popup - это компонент с селектором класса css '.popup'

<div class="popup">
  My Content
</div>

Я хочу передать некоторые входные и выходные свойства, например, как с обычным компонентным селектором

<div class='popup' [open]="open" (afterclose)="afterclose">
</div>

Но я получаю ошибку - Can't bind to 'open' since it isn't a known property of 'div'.

Мой компонент: -

@Component({
  selector: '.popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popupx.component.scss']
})

export class PopupComponent {
  @Input() open:boolean;
  @Output() afterClose: EventEmitter<any> = new EventEmitter();
}

Как мы можем этого достичь?

Answer 1

Вместо создания всплывающего компонента создайте всплывающую директиву и используйте ее в DIV.Тогда вы сможете использовать определенные входы и выходы.

Answer 2

Потому что вы пытаетесь отправить данные в div.Назовите свой компонент и передайте ему данные, например:

<popup [open]="open"></popup>