Is there any way to control html pc and html mobile in a single component?

I have the following code

import { Component, OnInit } from '@angular/core';
import { mobile } from '../../../../environments/environment';

@Component({
  selector: 'ctk-details-advisory',
  templateUrl: (mobile) ? 'details-advisory.component.mobile.html' : 
'details-advisory.component.html',
 styleUrls: ['./details-advisory.component.scss'],
})
export class DetailsAdvisoryComponent implements OnInit {
// ...

this helps me control different html, pc and mobile view. the problem is that when I want to perform unit tests I get the following error

Module not found: Error: Can't resolve ' (mobile) ? 'details-advisory.component.mobile.html' : 'details-advisory.component.html'' in '/home/anonymous/criptoanalisis-0.2/frontend/src/app/pages/advisory/details-advisory' @ ./src/app/pages/advisory/details-advisory/details-advisory.component.ts 23:22-121

would be of much help some solution to this problem or another way to control different html the truth is that I'm going a good time trying to solve the problem I would greatly appreciate any suggestion