I'm facing a challenge in determining the active status of an element attribute. I attempted the following approach, but it incorrectly returned false even though the element had the attribute in an active state - (.c-banner.active is present)
During ngAfterViewInit() {
const bannerElement = document.getElementById("banner");
const isActiveState = bannerElement && bannerElement.getAttribute("class")
.indexOf("c-banner.active") !== -1; // This resulted in false
}
Have you considered utilizing the classList and its contains method?
classList.contains();
ngAfterViewInit() {
const bannerElm = document.getElementById("banner");
const isActive = bannerElm && bannerElm.classList.contains('c-banner') && bannerElm.classList.contains('active');
}
To determine if the element contains the active class, you can utilize the classList.contains method.
ngAfterViewInit() {
setTimeout(() => {
const isActive = bannerElm &&
bannerElm.classList.contains('c-banner') &&
bannerElm.classList.contains('active');
}, 1000);
}
[UPDATED] By enclosing it within a setTimeout(), the issue with component initialization orders was resolved! This solution may help those facing similar challenges.
Aside from the traditional method of accessing the value of the class attribute, it seems that the issue at hand is related to asynchronous behavior based on your remarks.
Instead of resorting to a makeshift setTimeout fix, my suggestion would be to implement a mutation observer and respond to attribute changes accordingly.
Here's a sample approach to tackle this.
PS: I have adjusted the response to better align with your goals. Ultimately, this adjustment may not have a significant impact, except in cases where the banner state changes before the debounce period elapses, resulting in immediate emission and potential time savings compared to using setTimeout.
bannerIsActive$ = new BehaviorSubject<boolean>(false);
ngAfterViewInit() {
const banner = document.getElementById('banner');
const observer = new MutationObserver((mutations: MutationRecord[]) => {
const mutation = mutations[0];
const classList: DOMTokenList = mutation.target['classList'];
this.bannerIsActive$.next(mutation.attributeName === 'class' && classList.contains('active'));
});
observer.observe(banner, {
attributes: true
});
this.bannerIsActive$.pipe(
debounce(isActive => timer(isActive ? 0 : 1000)),
take(1)
).subscribe(isActive => {
// perform actions based on the banner state
});
}
It is recommended to utilize ViewChild instead of directly accessing your DOM elements. Both methods will achieve the desired outcome, but using ViewChild is considered the best practice.
@ViewChild('banner') input;
ngAfterViewInit() {
var classAttributes= this.input.nativeElement.getAttribute('class');
var result = classAttributes && classAttributes.includes('c-banner');
}
I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...
I needed to insert multiple files into the database by uploading and adding each file's content to a table. Once all files were added to the table, I included the table's values along with the file content in form data which was then passed to aj ...
I am currently working on developing a single-page application that retrieves information from a JSON file, displays it on the screen, and performs various actions. At this point, all the information is being properly displayed on the screen: http://jsfid ...
I have two components, a main parent component and a child component. The parent component contains a menu. Even when the child component says this.service.isMenuVisible(false), the menu remains visible in the parent component without any errors being thro ...
I'm currently developing a Content Management System (CMS) that allows users to access and organize records within a MySQL database. One of the features I have implemented is a user login system for the CMS. As part of this project, I am working on in ...
I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...
I have developed a unique custom directive called hero. My goal is to set up a nested view for multiple instances of hero. Check out this demo to see it in action. The desired layout looks something like this: <hero a="1"> <hero a="2"> ...
I have TextField elements in my application that appear to be too large. Upon inspection, I noticed that the input element within them has default padding that is too big.https://i.stack.imgur.com/C13hj.png My query is regarding how to adjust the styling ...
Recently, I encountered an issue with jquery flot while working on a real-time chart. Everything seemed to be functioning properly at first, but after some time had passed, I noticed a significant problem. Initially, the chart was updating correctly; howe ...
New to materialize pagination and currently working on the hierarchy below: app modules > list > list.component app.component Implemented a sample code example in app.component which worked perfectly. However, encountered issues when trying to imp ...
I'm facing an issue where the data from a form is being sent to MongoDB as undefined using nextJS and MongoDB. NewPlayerPage component: const newPlayerPage = (props) => { console.log('props: ' + props); const handleAddPlayer = a ...
Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...
I am currently developing an Angular application that requires editing and updating posts. Whenever a user leaves the edit post page and returns to it, I noticed that the data along with the success/error state are maintained. In order to ensure that users ...
I am seeking information on how to access the values of selected items in templates. Specifically, I want to understand how to retrieve the selected value of IPMIDisplayTime and IPMIDisplayTime within the template for later use. import {ViewChild, Elem ...
I'm struggling to utilize v-for in order to create multiple div elements, but no matter how I attempt it (even trying to iterate over a list), the v-for doesn't seem to function properly and always turns the line into a comment when executed. No ...
I am encountering an issue where I have to present an array of data within a table using Angular.js. Below is an explanation of my code. Table: <table class="table table-bordered table-striped table-hover" id="dataTable" > <tbody> ...
I have created a jQuery plugin using the nested namespace pattern, inspired by the design template found in Addy Osmani's book. The plugin is a simple gallery and everything seems to be functioning correctly. However, I am facing an issue when attemp ...
I am a beginner in NextJS and React, so please forgive my lack of knowledge. I am trying to figure out how to pass the text input by users from an input field (inside Header) to the getStaticProps function of a specific page using the React context API. I ...
Having trouble using buffer in my react-native app (developed with the expo tool). I have a hex value representing a geography Point like this for example -> 0101000020E61000003868AF3E1E0A494046B3B27DC8F73640 and I'm attempting to decode it into l ...
Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...