web-dev-qa-db-fra.com

Masquer les éléments à l'aide de Typescript

Je suis nouveau sur TypeScript et Angular Material. Je veux cacher des éléments à l'intérieur d'éléments comme celui-ci.

<div id="abc">
   <div id="123">
      <p>Hello!</p>
   </div>
      <p>World</p>
</div>
<div id="def">
    <p>Hello World</p>
</div>

Je veux cacher le bloc div (id: 123). J'ai essayé de cette façon.

var formElement = <HTMLFormElement>document.getElementById('123');
formElement.style.display='block';

Il obtient une erreur disant Impossible de lire la propriété 'style' de null .... Comment puis-je résoudre ce problème.

htmlangulartypescript
6
JanithCW

Ce n'est pas la façon de masquer des éléments dans Angular. Liez l'attribut style de votre élément à un booléen, comme ceci:

<form [style.display]="isVisible ? 'block' : 'none'">... contents</form>

Et dans votre classe de composants:

this.isVisible = false; // whenever you need to hide an element

Ou vous pouvez utiliser *ngIf:

<form *ngIf="isVisible">... contents</form>

Veuillez noter que *ngIf supprime complètement le nœud et ses enfants de l'arborescence DOM si les conditions se transforment en false, et les recrée entièrement à partir de zéro lorsque la condition devient true.

9
Armen Vardanyan

Vous pouvez accéder à l'élément dom en utilisant ViewChild avec #localvariable comme illustré ici,

import {Component, NgModule,ViewChild,ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
   <div id="abc">
   <div #id id="123">
      <p>Hide!</p>
   </div>
      <p>World</p>
</div>
<div id="def">
    <p>Hello World</p>
</div>
  `,
})
export class App {
  name:string;

@ViewChild('id') el:ElementRef;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  ngAfterViewInit()
  {
     this.el.nativeElement.style.display='none';
     console.log(this.el.nativeElement);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
5
santosh singh