How to hide input with Angular

First of all, you should decide if you are going to hide your input and get it with pure js/html or using Angular capabilities, because the lines of code that you've posted are using vanilla javascript. Going that way you should try adding to the input css style with property visibility: hidden.

To make it hidden using Angular you should bind hidden property using square brackets notation like this: [hidden]="true".

And you should get the element in your code by initializing Angular Form and finding input by formControlName, here are the docs with explicit explanations how to achieve this: https://angular.io/api/forms/Form

If you have only one input and don't want to initialize the whole form for it, you may try to add ElementRef, the code would be something like this:

import {ElementRef} from '@angular/core';
@ViewChild('myInput') inputElement:ElementRef;

ngAfterViewInit() {
      this.inputElement.nativeElement.focus();
}

<input #myInput [hidden]="true" [(ngModel)]="refresh">

What about hiding the field conditionally?

<input [hidden]="!isInputShown" type="text" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">

And in your ts something like this:

hideInput() {
    this.isInputShown = true;
}

hideInput() {
    this.isInputShown = false;
}

And then just call those methods to hide/show.