CODEWITHSUNDEEP
cssangulartypescript
Matthew Skopek
Matthew Skopek

Reputation: 71

Angular2 how to change styles of css classes in typescript?

I am trying to toggle viewing categories of items within a very long list, based on what the user wants to see. I want to toggle viewing everything, just meetings, just events or nothing. (this is a small example I really have about 15 categories)

<ul>
<li class="cal-meeting">meeting title</li>
<li class="cal-event">event title</li>
<!-- … the list goes on with various events and meetings -->

So I have the following checkboxes to toggle the viewable items:

<input type="checkbox" checked (click)="toggleCal('meeting')">
<input type="checkbox" checked (click)="toggleCal('event')">
// checkboxes are initially checked however I will make this dynamic saved in DB for user preference

In my angular component in TypeScript I have the function:

toggleCal(toggle_items) {
   if (toggle_items === 'meeting') {
       // this.display_meeting is initially set to true in ngOnInit
       this.display_meeting = !this.display_meeting;
       if ( this.display_meeting ) {
          // set class cal-meeting to display: block;
       } else {
          // set class cal-meeting to display: none;
       }
   }
// do the same thing if toggle_items === 'event'
}

How do I change the display value of the classes cal-meeting and cal-event in my Typescript? I assume just changing the CSS values of the classes is the best way.

I did try:

document.getElementsByClassName('cal-meeting').style.display = 'none';

But I get an error saying "Property 'style' does not exist on type 'HTMLCollectionOf'"

Upvotes: 4

Views: 16067

Answers (2)

Mahmoud Valizadeh
Mahmoud Valizadeh

Reputation: 667

try to convert your selection as HTMLElement

const element = <HTMLElement> document.getElementsByClassName('cal-meeting')[0];

then use :

element.style.display = 'none';

also you can use *ngif for remove it but if you want to use javascript's function to change style you should convert it to HTMLElement but you can use angular [ngStyle]="{'property': expression}" for changing style like :

<li class="cal-meeting" [ngStyle]="{'display': !this.display_meeting ? 'none': 'block'}">meeting title</li>

or you can add class for example if you have class like :

.d-none: {display: none}
.d-block: {display: block}

you can use it in typescript like:

export class MyComponent implements OnInit {
hidingClass: string = '';
toggleCal(toggle_items) {
if (toggle_items === 'meeting') {
       this.display_meeting = !this.display_meeting;
       if ( this.display_meeting ) {
          this.hidingClass = 'd-block'
       } else {
          this.hidingClass = 'd-none'
       }
   }
// do the same thing if toggle_items === 'event'
}

just use it in your html element:

<li class="cal-meeting" [ngClass]="hidingClass">meeting title</li>

Upvotes: 7

Quan Vo
Quan Vo

Reputation: 1336

If it's just toggle the view, why you did not put something simple like this

<li class="cal-meeting" *ngIf="this.display_meeting">meeting title</li>

Upvotes: 0

Related Questions