show blank page when use Directive ngIf or Directive ngFor in angular

Question

I just started Angular and beginner in it.

When I use the *ngIf or *ngFor in my Component, the program output is a blank page but without *ngIf and *ngFor The page works correctly.

code of Product.Component.html

<p>Q: what is your Name?<input [disabled]="isButtonDisable" type="text" #txtAnswer>
    <button [disabled]="product.price>1000" (click)="onclickHandler(txtAnswer.value)">Answer</button>
    <h3 *ngIf="isButtonDisable">{{deadline}}</h3>
</p>

and code of product.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  public isButtonDisable = false;
  public product = {
    name: 'car',
    price: 1000
  };
  public deadline = 20;
  constructor() {
    setInterval(() => this.deadline--, 1000);
    setInterval(() => this.isButtonDisable = true, 20000);
  }
  onclickHandler(Value: number) {
    this.deadline = 20;
  }
}

my IDE is vscode and

Angular CLI: 8.1.1

Node: 10.15.2

OS: win32 x64

Angular: 8.1.0

Please guide me where the wrong thing is :(

Answer 1

Thing is, you get validation errors when placing <h3> or <input> tags inside a <p> at least that's what the console says...

Try:

Q: what is your Name?
<input [disabled]="isButtonDisable" type="text" #txtAnswer />
<button [disabled]="product.price>1000" (click)="onclickHandler(txtAnswer.value)">
  Answer
</button>
<h3 *ngIf="isButtonDisable">{{deadline}}</h3>

Should render just fine. You don't need the <p> tag anyway. You could style your host component via :hostin the .cssfile.