Change CSS property in Typescript (Angular)

Asked

Viewed 3,539 times

0

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

My list is composed this way:

<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 job verificaPermissão need to set the display for none when click occurs. I tried with nativeElement:

Constructor:

private el: ElementRef

Typescript:

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

I also tried to:

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 property display of my sub-class?

html css angular

  • You can bind the Hidden attribute by passing true or false: <li [hidden]="condicao">...</li>

1 answer

1


If you are going to change a property you can use ngStyle if you are more than one you can use ngClass

take a look at the stackblitz that I created:

https://stackblitz.com/edit/angular-ohu5kw

TS

  display = 'listview'

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

HTML

<p [ngStyle]="{'display': display}">teste</p>
<button type="button" (click)="mudarDisplay()">teste</button>

Browser other questions tagged html css angular

You are not signed in. Login or sign up in order to post.