How do I make a custom directive take effect in a shared component?

Question

In my Angular 9 app, I have written a custom directive, src/directives/is_mobile.directive.ts, which looks like the below ...

import { Directive, OnInit, Template