Angular2 how to change styles of css classes in typescript?

Question

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'"

getElementsByClassName gives an array of elements not an element so i think you should use a loop over the elements — Harkal
– Harkal, Commented Oct 12, 2019 at 17:00
Will it not be better to add an *ngIf to the li element - <li class="cal-meeting" *ngIf="display_meeting">meeting title</li>. This ensures that the item is displayed only when display_meeting is set to true. — Johns Mathew
– Johns Mathew, Commented Oct 12, 2019 at 17:03

Mahmoud Valizadeh · Accepted Answer · 2020-10-19 07:58:51Z

7

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>

edited Oct 19, 2020 at 7:58

answered Oct 12, 2019 at 17:18

Mahmoud Valizadeh

6677 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CPHPython Over a year ago

Alternatives appreciated. A minor correction according to Angular docs, add double quotes (") around the CSS object when using ngStyles, i.e [ngStyle]="{'display': myDisplay; 'color': 'blue'}", to prevent Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it..

Mahmoud Valizadeh Over a year ago

Thank You, I forget it

Quan Vo · Accepted Answer · 2019-10-12 23:53:00Z

0

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>

answered Oct 12, 2019 at 23:53

Quan Vo

1,35611 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular2 how to change styles of css classes in typescript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related