Change CSS property in TypeScript (Angular)

Navigation
0

I have a list that when I click on it, I need the display: listview to be changed to display: none .

My list is composed like this: 

<li class="sub">
     <a class="dropdown-item waves-effect" (click)="verificaPermissao(9, 'confestoque')">
     <i class="mr-3 fa fa-archive"></i>Estoque</a>
</li>

In my function verificaPermissão , I need to set the display to none when the click occurs. I tried with nativeElement :

Builder: 

private el: ElementRef

Typescript: 

verificaPermissao(idTela?: number, nomeRota?: string){
     let lista = this.el.nativeElement.querySelector(".sub"); 
     lista.classList.remove('display')
}

I've also tried: 

const element = document.getElementsByClassName('sub');
this.renderer.setElementAttribute(element, "display", "none");

But I get: 

 ERROR TypeError: el.setAttribute is not a function
     at

How can I access the display property of my sub class?

    
asked by anonymous 15.10.2018 / 20:29

1 answer

0

If you are changing a pop you can use ngStyle if it is more than one you can use ngClass

Take a look at the stackblitz I created:

link

TS 

  display = 'listview'

  mudarDisplay(){
    this.display='none';
  }

HTML 

<p [ngStyle]="{'display': display}">teste</p>
<button type="button" (click)="mudarDisplay()">teste</button>
    
15.10.2018 / 21:27
MYSQL Data Return (Data) for HTML Tables Save results from a function in a variable Ionic 3 + Firestore