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

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

javascripthtmlcss

Having trouble installing Popper.js?

I have encountered an issue while attempting to install popper.js in my angular project. ng new <<project>> cd <<project>> npm install popper --save npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules&b ...

angularnpmpopper.js

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

javascripthtmlcssbootstrap-5

External CSS File causing improper sizing of canvas image

I have been working on implementing the HTML5 canvas element. To draw an image into the canvas, I am using the following javascript code: var img = new Image(); var canvas = this.e; var ctx = canvas.getContext('2d'); img.src = options.imageSrc; ...

javascriptcsshtml

Link Array Element to [(value)] within Angular

Hey there! I'm currently working with Angular Material and dealing with an Array of products to generate a table in my template. <tbody> <tr *ngFor="let item of productArray | async; let i = index"> Within this loop, I have another l ...

angularmaterial-ui

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

How to open a print preview in a new tab using Angular 4

Currently, I am attempting to implement print functionality in Angular 4. My goal is to have the print preview automatically open in a new tab along with the print popup window. I'm struggling to find a way to pass data from the parent window to the c ...

javascriptangulartypescriptprintingtabs

The argument type provided for returning an object in Rxjs switchmap is not valid

I have created a service in Angular that fetches data from different services and combines it with the initial service's data. If the initial service returns empty data, there is no need to call the second service. Here is the code: searchData(): Obs ...

angularrxjsswitchmap

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

htmlcss

The hamburger menu appears to be missing when viewing in Safari, while it functions properly on both Chrome and Firefox browsers

My website has a responsive menu that functions perfectly in Chrome and Firefox, but encounters issues in Safari on mobile devices. The site is built using Elementor WordPress and I believe adding some -webkit- properties could solve the problem, but I&apo ...

cssmenumobile-safarihamburger-menumobile-webkit

Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly? <html> <head> <script> function mobile320() { ...

javascriptjquerycsshtml

Having trouble setting the CSS width to 100%

Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...

javascriptcsstestingbddnightwatch.js

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

javascriptcssreactjsreact-nativestyled-components

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Users are restricted to opening only a maximum of 5 tab panes, even if there are multiple tab buttons available. If the user tries to click on the 6th tab, an alert message will be displayed. function addTab(title, url){ var tabs=$(".tabs"), tab ...

javascriptphpjquerycssbootstrap-4

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

pythonhtmlcssseleniumxpath

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss

A div element featuring a border with transparent edges on the top right and bottom left corners

Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you in advance! This is the HTML <div class="carouselle"> <div clas ...

htmlcssbordercss-shapes

In Javascript, check if an item exists by comparing it to null

I am working with a dropdown list that can be used for various types of data. Some of the data includes an isActive flag (a BOOLEAN) while others do not. When the flag is absent, I would like to display the dropdown item in black. However, if the flag exis ...

javascriptangulartypescript

My goal is to create a stylish form using bootstrap and CSS3

I am aiming to replicate the layout of this particular page: Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing between fields. Seeking advice on th ...

htmlcss

ionChange - only detect changes made in the view and update the model in Ionic 2

In my Ionic 2 application, I have a feature that allows users to schedule notifications as reminders. The requirements for this feature are as follows: Upon entering the reminder page, it should check if there is a saved reminder. If a reminder is saved ...

androidangulartypescriptionic2reminders