How to hide element with style in angular-CodePudding

I'm new in angular and I want to make something like:

document.getElementById('div').style.display = 'none';

but I have an error enter image description here

I already deleted the ? mark and still not working its a click event that I want to make to add some animation to it

CodePudding user response：

I think you can try this solution

showModal() {
 const div = document.getElementById('modal');
 if(div) {
   div.style.display = 'none'
 }
}

CodePudding user response：

You need to use ngClass or ngStyle to apply classes or styles conditionally! Avoid the javascript implementation, because further down the development road it will lead to complexity with this implementation! Use Angular standard building items.

ngClass Stackblitz

ngStyle Stackblitz

tutorial

CodePudding user response：

You can show and hide elements using the *ngIf structural directive. You pass it a property that should have a true/false value to determine if the element should be shown or hidden. The following example shows its usage and toggling whether or not to show or hide the modal.

@Component({
  selector: 'my-component',
  template: `
    <div  *ngIf="hideModal">This is a modal</div>
    <button (click)="toggleModal()">Toggle Modal</button>
  `
})
export class MyComponent implements OnInit {
  hideModal = true;

  toggleModal() {
    this.hideModal = !this.hideModal;
  }
}