How to use an Angular component as a div

Question

I want to make a "popup" component which is just a wrapper for any other components i add inside of it. For clerification this is how i want to use it:

<app-popup>
    <some-component></some-component>
</app-popup>

Then it would just load the "some-component" centered inside of the "app-popup" component.

The example is also exactly how i tried it, just made my popup component like this:

html:

<div class="popup-wrapper"></div>

css:

.popup-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

But this doesn't seem to just work...

Is it possible to use a component in that way?

Answer 1

您可以将 css 类添加到 app-popup 组件，然后在组件的模板中使用ng-content标签