Директивы связывания динамически, используя Renderer2 в Angular

Question

Я пытаюсь получить следующее на моем HTML с использованием Renderer2

<div class="text-danger" *ngIf="valForm.controls['email'].hasError('required') && (valForm.controls['email'].dirty || valForm.controls['email'].touched)">This field is required</div>

Выше приведена обязательная проверка поля для текстового поля, но "div" должен отображаться динамически. В настоящее время я использую приведенный ниже код.

 const validator_div = this.renderer.createElement('div');
 this.renderer.addClass(validator_div, 'text-danger');
 validator_div.innerHTML = "This field is required";

 this.renderer.setAttribute(validator_div, "*ngIf", "valForm.controls['formControlName'].hasError('required') && (valForm.controls['formControlName'].dirty || valForm.controls['formControlName'].touched)");

Код выдает ошибку

Не удалось выполнить 'setAttribute' для 'Element': '* ngIf' не является действительное имя атрибута.