Angular — при изменении размера элемента HTML

Я использую Angular 5. Я пытаюсь сделать адаптивную боковую панель навигации. Когда ширина окна изменяется, мне нужно применить некоторые события (css, контент и т.д.). В моем примере я хочу изменить внутренний HTML-текст, когда ширина окна меньше 1080 пикселей.

Я попробовал три способа. По javascript и ng-модели, но ничего.

HTML:

<div id="nav-left">
    <mat-list>
     <mat-list-item><a id="elp1" [routerLink]="['/']" fragment="intro-text" ng-model="innerHtml"> Welcome </a></mat-list-item>
     <mat-list-item><a id="elp2" [routerLink]="['/']" fragment="introduction"> Introduction </a></mat-list-item>
     ...
    </mat-list>
</div> 

Компонент (первый способ):

@HostListener('window:resize', ['$event'])
    onResize(event?) {      
      this.screenWidth = window.innerWidth;
      let bgScreen = true;
      let smScreen = true;
      if(this.screenWidth < 1080 && smScreen){
        document.getElementById("elp1").innerHTML = "New";

        smScreen = false; 
        bgScreen = true;

      }else if(this.screenWidth >= 1080 && bgScreen){
        document.getElementById("elp1").innerHTML = " Welcome ";

        bgScreen = false;
        smScreen = true;        
      }else{
        console.log('problem');
      }
    }

В этом случае я получаю консольную ошибку:

Uncaught (in promise): TypeError: Cannot set property 'innerHTML' of null

Компонент (второй способ):

@HostListener('window:resize', ['$event'])
        onResize(event?) {      
          this.screenWidth = window.innerWidth;

          if(this.screenWidth < 1080){
            let element = <HTMLInputElement>document.getElementById("elp1");
            element.value = "New";

          }else if(this.screenWidth >= 1080){
            let element = <HTMLInputElement>document.getElementById("elp1");
            element.value = "Welcome";      
          }else{
            console.log('problem');
          }
        }

С ошибкой:

Uncaught (in promise): TypeError: Cannot set property 'value' of null

Компонент (третий способ и ng-модель):

@HostListener('window:resize', ['$event'])
            onResize(event?) {      
              this.screenWidth = window.innerWidth;

              if(this.screenWidth < 1080){
                let innerHtml :string = "New";

              }else if(this.screenWidth >= 1080){
                let innerHtml :string = "Welcome";      
              }else{
                console.log('problem');
              }
            }

Без ошибок, но не работает.

1) Первая проблема - это вышеперечисленные ошибки. 2) и, во-вторых, как вы видите в примере «первого способа», я попытался добавить эффекты срабатывания флагов и понял, что это тоже не сработало. Переменные "bgScreen" и "smScreen" всегда истинны. Я поставил их для лучшего потока кодирования.

Я не хочу использовать jQuery. Только машинопись или угловой (ng-модель) способ. Какие-либо предложения?