How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria.

       <div class="form-group">
            <label class="d-block">Allowance Type</label>
            <div class="input-group">
                <input type="text" class="form-control width-150" [(ngModel)]="selectedPricingItem.allowanceTypeDescription" readonly>
                <span class="input-group-addon mg-batch-flag" (click)="flagItem('allowanceTypeDescription','Allowance Type')" data-toggle="modal" data-target="#auditDialog">
                     <i class="fa fa-fw fa-flag" aria-hidden="true">
                     </i>
                </span>
            </div>
        </div>

This structure repeats multiple times on the page, and I want to apply a Bootstrap class (has-danger) based on a click event handler. In the event handler, I populate an instance of a class intended for submission to a web service. Would it be best to create a component with different styles and use *ngIf to hide/show?

csstwitter-bootstrapangular

Answer №1

To easily apply a class, utilize the class binding feature:

[class.isActive]="conditionMet"

Make sure to set the variable conditionMet to either true or false in order to add or remove the specified class. For more intricate situations where multiple classes need to be added, consider using [ngClass].

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to transfer parameters from one page to another page using the pop method in Ionic 2?

Is it possible to pass parameters from one page to another during a push operation, but how can this be done during a pop operation? showfilter(){ this.navCtrl.push(FilterPage,{ fulldetail : this.selectedarea }); } Can you explain how ...

angularionic2

Customizing Bootstrap Navigation: Creating Space Between Menu Items

I've configured my Bootstrap navigation with a dropdown toggle for "Coverage". I'm looking to decrease the spacing between each list item (li) under this dropdown. What CSS setting should I use to achieve this? Interestingly, when I apply float: ...

csshtmltwitter-bootstrap

Attempting to superimpose a CSS triangle arrow onto a Google Map

I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map. Here is a snipp ...

htmlcssgoogle-maps

toggle visibility of <li> elements using ng-repeat and conditional rendering

I have an array of color IDs and codes that I'm utilizing with ng-repeat in the <li> tag to showcase all colors. However, I only want to display colors where the color code is less than 10, hiding any colors where the color code exceeds 10. Addi ...

cssangularjs

IE11 triggers DatePicker to display as NaN when changing the year

When attempting to manually adjust the year value in the input field rather than utilizing the popup, the datepicker switches the value to "NaN/NaN/NaN". This issue appears to be specific to IE11 as it works correctly in Chrome. ...

angularkendo-ui-angular2

Error 401 encountered while accessing the Binance API using Ionic and Angular

function makePrivateCall(apiSecret, apiKey, endpoint, data = null, isGetRequest = true) { const timestamp = Date.now(); const recvWindow = 60000; //maximum allowed, default 5000 var obj = { apiSecret, ...data, timestamp, ...

angularangularjsionic-frameworkbinancebinance-api-client

Applying CSS to color the letters of a text, without needing to alter the HTML code

I'm just beginning to learn CSS and today I received a school assignment: Below is the HTML code provided: <head> <meta charset="UTF-8"> <title>ABC</title> <style> /* CSS section */ </style> ...

css

Ensure that any changes to the FormControl are detected and trigger an Observable change without requiring user interaction, using .distinctUntilChanged

In my application, I have implemented a FormControl/service that updates when the user types input into a field. Here's how it works: term = new FormControl(); page = new BehaviorSubject(1); .. .. // Calling the search function search(th ...

angularrxjs

FullCalendar mysteriously missing from SystemJS Builder bundle

I am currently using the SystemJS builder to compile an Angular 2 application with PrimeNg components. The issue arises when trying to integrate the PrimeNg schedule component which relies on FullCalendar. Although the builder runs without errors, when I a ...

angularfullcalendarschedulersystemjsprimeng

Sharing information between components using input and output ports

I'm new to Angular 2 and despite looking at multiple tutorials, I can't seem to get this particular functionality to work. Can someone please point out what I might be missing here? My goal is to pass a boolean value from one component to anothe ...

angular

Error in Angular 2: Component unable to locate imported module

I'm facing an issue where a module I want to use in my application cannot be found. The error message I receive is: GET http://product-admin.dev/node_modules/angular2-toaster/ 404 (Not Found) The module was installed via NPM and its Github reposito ...

angulartypescriptnpmsystemjsangular2-toaster

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

htmlcssangularjsionic-framework

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

htmlcsscss-counter

Using Javascript, dynamically animate the text in the hero unit with fading in and out effects

I currently have a "Hero" unit with the following code: <div class="hero-unit"> <div class="container"> <h1>Dapibus Euismod Mollis</h1> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ...

javascriptjqueryhtmltwitter-bootstrap

Splitting the string into individual characters using string.split("").map may cause layout issues on small devices

Shoutout to @pratik-wadekar for the amazing help in creating a working text animation. However, I encountered an issue when testing it on various screen sizes and mobile devices - the animated word plants breaks into pieces like PLA on one line and NTS on ...

javascripthtmlcssreactjstypescript

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

htmlangulartypescriptangular-ivy

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

I am facing a situation where I have a table with multiple lines as shown below: <table> <tr id="line1"><td>Line</td><td>1</td></tr> <tr id="line2"><td>Line</td><td>2</td></t ...

javascriptcsshtml-table

The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design. .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } .btn-three { color: #FFF; transitio ...

htmlcssbuttonhover

Angular: Keeping all FormControls in sync with model updates

I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...

javascriptangularangular-forms