Creating a class dynamically in Angular 2 Typescript based on a property value

Question

Creating a class dynamically in Angular 2 Typescript based on a property value

How can I dynamically assign classes in HTML based on a property in Angular 2 without using jQuery or Bootstrap? I am trying to open a dropdown list.

Here is what I have:

<li
  class="dropdown mega-menu mega-menu-wide"

  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

In my TypeScript file, I have:

export class ... {
  propertyval :null

   toggle(val){
    this.propertyval = null;
   }
  }

Now, I want to add the class "open" to the list if the value of propertyval is "admin", otherwise it should remain null.

How can I achieve this?

javascript angular typescript typescript2.0

Answer 1

Answer №1

To dynamically add a class, you can utilize property binding.

<li
  class="dropdown mega-menu mega-menu-wide"
  [class.WhateverYouWant]="propertyval === 'admin'"
  //Need help adding the class 'open' if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

Answer 2

To dynamically add a class, you can utilize property binding.

<li
  class="dropdown mega-menu mega-menu-wide"
  [class.WhateverYouWant]="propertyval === 'admin'"
  //Need help adding the class 'open' if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

Answer 3

Answer №2

To apply styles dynamically, you can utilize the NgClass directive:

<li [ngClass]="{'class-open': open}">  
  <a #admin class="dropdown-toggle" (click)="open = !open;" >Administrative</a>
</li>

The class-open class modifies the dropdown list appearance based on the value of the open variable within your component. Ensure to initialize the open variable as either false or true, eliminating the need for a toggle() method.

Answer 4

To apply styles dynamically, you can utilize the NgClass directive:

<li [ngClass]="{'class-open': open}">  
  <a #admin class="dropdown-toggle" (click)="open = !open;" >Administrative</a>
</li>

The class-open class modifies the dropdown list appearance based on the value of the open variable within your component. Ensure to initialize the open variable as either false or true, eliminating the need for a toggle() method.

Answer 5

Answer №3

Hey there! One way to incorporate dynamic styles is by using [ngClass].

<a #user class="dropdown-toggle" (click)="toggle(user)"  [ngClass]="{'styleClass': isUser }" >User Profile</a>

//style

.styleClass{
  font-weight: bold;
}

//.ts

       toggle(value){
        if(value != 'user') 
        {
            this.value = null;
            return isUser = false;
        }
        else {
            return isUser = true;
        }
}

Answer 6

Hey there! One way to incorporate dynamic styles is by using [ngClass].

<a #user class="dropdown-toggle" (click)="toggle(user)"  [ngClass]="{'styleClass': isUser }" >User Profile</a>

//style

.styleClass{
  font-weight: bold;
}

//.ts

       toggle(value){
        if(value != 'user') 
        {
            this.value = null;
            return isUser = false;
        }
        else {
            return isUser = true;
        }
}

Answer 7

Answer №4

Implement a method in your class that retrieves a boolean indicating the status of your property.

get isPropertyFilled(): boolean {
  return !isNullOrEmpty(this.propertyValue);
}

Next, include an ng-class directive in your HTML element.

<a [ng-class]="{ 'active': isPropertyFilled }"/>

Answer 8

Implement a method in your class that retrieves a boolean indicating the status of your property.

get isPropertyFilled(): boolean {
  return !isNullOrEmpty(this.propertyValue);
}

Next, include an ng-class directive in your HTML element.

<a [ng-class]="{ 'active': isPropertyFilled }"/>

Creating a class dynamically in Angular 2 Typescript based on a property value

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for adding a personalized close button to a Bootstrap modal

Determining the largest range possible in a sorted array of integers

Ways to reach state / methods outside of a React component

"Utilize JavaScript to structure JSON, eliminate redundant entries, and calculate the total number

What could be causing the increased build size of my Polymer2 compared to Angular5?

Switch between displaying the HTML login and register forms by clicking a button

Filtering a Table with Angular Material: Using multiple filters and filter values simultaneously

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Struggling to Personalize Kendo Calendar Month templates using Knockout Kendo JS Binding

Using three.js to control the opacity and size of points

Steps for installing an npm package from a downloaded folder

Typescript's Type Specification

Discover the new method for establishing fixed column widths in the PrimeNG table now that the Autolayout property is no longer in use

What is the process for installing fontawesome using npm?

Determine if a line intersects with a mesh in a three.js environment

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

Trigger an API request upon expanding a row in a mat-table

Using the built-in http module in node.js to upload images via multipart/form-data

The issue of WithRouter Replace Component not functioning in React-Router-V6 has been encountered

What is the best way to display SVGs from an API response using next/image or the <img> tag in Next.js?