'I try to use *ngIf to display and hgide dome words with a button, but ngIf does not work

Here is my code.

app.component.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>toogleTag</title>
</head>

<body>

  <div *ngIf="display">

      <p>Toogle by click</p>

  </div>

  <button (click)="toogleTag()">Toogle Tag</button>

</body>

</html>

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  display:boolean=false;
  ngOnInit(){
  }
  toogleTag(){
    this.display=!this.display;
  }
}

I design a porperty: display to show the div or not, and use ngIf, but ngIf is not work, I dont know why.

angular

Solution 1:^[1]

Move everything that is not in the body out of app.component.html and into index.html

Inside the index.html, you should have the HTML, head, body, etc.

Inside body you should only have AppComponent selector, in this case app-root.

<body>
  <app-root></app-root>
</body>

Look at how it's structured when you execute:

ng new (project-name)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Arturo Chen

'I try to use *ngIf to display and hgide dome words with a button, but ngIf does not work

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]