How does the ngIf directive work?

Question

Angular

I have several DOM elements:

<myComponent *myIfDirective="'xs'">1</myComponent>
<myComponent *myIfDirective="'lg'">2</myComponent>

You need to write your own directive myIfDirective , which works exactly the same as ngIf . You need to understand which function is responsible for rendering the object and how it can be frozen.
The first block is for the mobile version, the second for the desktop version.
I mean that can be done with CSS, but there may be ajax requests in the component that will affect performance.

Answer 1

Open the source and take a look.

Answer 2

Full solution to your problem https://github.com/ang5-examples/ui-kit/tree/maste...

<test-component *ifViewportSize="'small'" [value]="1"></test-component>
<test-component *ifViewportSize="'medium'" [value]="2"></test-component>
<test-component *ifViewportSize="'large'" [value]="3"></test-component>