What do I need to import to use directive that take into account the costume sizes

[axell9641]

Hi I trying to use the custom sizes I have defined like this:

const config = {
  breakPoints: {
      xs: {max: 600},
      sm: {min: 601, max: 900},
      md: {min: 901, max: 1200},
      lg: {min: 1201, max: 1799},
      xl: {min: 1800}
  },
  debounceTime: 100
};

<app-desktop-home ></app-desktop-home>
<app-mobile-home  ></app-mobile-home>

What directive should I use to tell the first component to show only if size is sm or larger
What directive should I use to tell the second component to only show if size is xs

And the most import question, how to include those directive. I tried adding them to a module, but it didn't work

Thanks in advance