Updating View in Angular 2 ngClass Issue

I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller:

@Component({
    selector: 'show-hide-table',
    template: '
    <table>
        <thead>
            <tr>
                <th (click)="toggleHidden()">
                    <div>Show/Hide</div>
                </th>
                <th [ngClass]="{\'hidden\':isHidden}">
                    <div>Div is Shown</div>
                </th>
            </tr>
        </thead>
    </table>',
    styleUrls: ['show-hide-table.component.css']
})

export class ShowHideTable implements OnInit, OnChanges, DoCheck {
    public isHidden: boolean = false;

    public toggleHidden() {
        this.isHidden = !this.isHidden;
        this.log.debug('Hidden', this.isHidden);
    }

    ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
        this.log.debug('Grid Changes');
    }

    ngDoCheck() {
        this.log.debug('Grid Check');
    }
}

'hidden' is a css class with display: none. Initially setting isHidden to true hides the header, and setting it to false shows it, indicating that the class is functioning. While I have simplified the example for clarity, this accurately represents my code. Upon clicking the header, the log displays the toggling of the isHidden variable, but the hidden class does not change accordingly. Additionally, neither ngOnChanges nor ngDoCheck are triggered when the clickable header is clicked.

Answer №1

There appears to be an issue with the number of single quotes in your code. The quotation marks surrounding 'hidden' may be ending one string and starting another. To resolve this, you will need to escape those quotes.

<th [ngClass]="{\'hidden\':isHidden}">

Although I have not tested this solution, it should work. If not, consider using JavaScript encoding for the quotes by replacing the single quote with \x27.

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

A guide on incorporating a single class object of type Observable<any> into HTML

I'm currently working with Angular4 and have a Windows Timer subscribed observable in my typescript file. this.dynamicTime = new Observable<string>((observer: Subscriber<string>) => { setInterval(() => observer.next(this ...

ReactJS input range issue: Cannot preventDefault within a passive event listener invocation

I've been encountering some issues with the react-input-range component in my React App. It functions perfectly on larger viewports such as PCs and desktops, but on smaller devices like mobile phones and tablets, I'm seeing an error message "Unab ...

Leverage the power of Web Components in Vue applications

Currently, I am attempting to reuse Web Components within a Vue Component. These Web Components utilize the template element for formatting output. However, when I insert them into the Vue Template, they are either removed from the DOM or compiled by Vue. ...

Place unchangeable elements both preceding and following an input field

At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve: I am seek ...

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

concise stylus CSS selector

Is there a way to condense these stylus selectors for a cleaner look? #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > ...

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

the value contained in a variable can be accessed using the keyword "THIS"

I recently developed a snippet of code that adds a method to a primitive data type. The objective was to add 10 to a specified number. Initially, I had my doubts about its success and wrote this+10. Surprisingly, the output was 15, which turned out to be ...

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

What is the best way to tally json elements for every parameter?

My data consists of JSON objects with "Week" and "From" properties: { "Week": 1145, "From": "IN1" }, { "Week": 1145, "From": "IN1" }, { "Week": 1145, "From": "IN2" }, { "Week": 1146, "From": "IN1" }, { "W ...

Challenges with handling callbacks in Javascript

I'm currently working on creating a user-friendly GUI using the w2ui library, but I've encountered an issue with integrating a toolbar into my main layout. The problem arises when the toolbar is added before the layout is fully constructed. Sinc ...

Executing javascript function using setInterval

I'm trying to make a JavaScript function that rotates between Divs every 1500ms (1.5s) This is what my script currently looks like: <?php $rowCount = 3; $prefix = 'ITS_'; ?> var step = 1; var stepmax = <?php echo $rowCount; ? ...

Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this. Initially, I included the necessary stylesheets at the top of the page: <link rel=&q ...

How can unicode (%u2014) be handled in JavaScript or C#/.NET?

While browsing through the vast expanse of the internet (specifically on a review site like Rotten Tomatoes), I stumbled upon %u2014. This particular string reminded me of something I once encountered in JavaScript. Although I can't quite recall if it ...

How can I use the import statement to incorporate the 'posts.routes.js' file into my app using app?

Searching high and low for answers but coming up empty. When setting up an express app and including a file of routes, you typically encounter guidance on using the following statement: require('./app/routes/posts.routes.js')(app) As per nodejs. ...

Organizing Parsed JSON Data with JavaScript: Using the _.each function for Sorting

var Scriptures = JSON.parse( fs.readFileSync(scriptures.json, 'utf8') ); _.each(Scriptures, function (s, Scripture) { return Scripture; }); This code extracts and displays the names of each book from a collection of scriptures (e.g., Genesis, ...

Exploring the implementation of --history-api-fallback in webpack

let path = require('path') module.exports = { entry:path.resolve('public/src/index.js'), output: { path:__dirname + "/public", filename: "bundle.js" }, module: { loaders: [{ exclude: / ...

Alert users before visiting external websites

Is there a way to notify users about external pages without using popups like in the first example here: Instead of the unwanted code shown above, is there an alternative solution? Is there a different approach that can be taken? For instance, check out ...

My goal is to exclusively create illustrations of items within a camera's view

Currently, I am using THREEJS to create a dynamically generated 'minecraft' world utilizing a perlin noise generator. Check out the progress so far: Block World Everything is going smoothly except that I am facing significant performance issues ...

Categorize elements in an array based on a specific keyword

Struggling with my AngularJS (1) application, I can't seem to figure out how to split an array of items into separate arrays grouped by item. In simpler terms, I have an array with different items and I want to group them by their uuid like this: [ ...