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');
}
Creating a dynamic DIV and positioning it in between other Div's based on their attribute value is the goal. The desired outcome is to maintain sequence. <div data-door="1">1</div> <div data-door="3">3</div> <div data-door ...
I removed the localStorage storage, but it didn't make a difference. I'm curious - does GitHub store IP addresses of logged-in users in a database, or maybe in browser headers? ...
I am trying to create a condition where a property is checked against the ID of a div container. If they match, I want to display the container. For example, in the code snippet below, I need to compare the activeWindow property with the div id. If they a ...
My front end Canvas is transformed into a png file that needs to be POSTed to a third party vendor's API. The response comes back to Node as a base64 file which I decode, but upon attempting the upload, an error occurs: Error processing POST reques ...
I am attempting to add a strike-through effect to a list item after a user clicks on it. To achieve this, I have developed a function that changes the style: const completed = () =>{ return document.getElementById("demo").style.textDecoration=&ap ...
I'm encountering some bugs in my Angular 1.5 project with TypeScript. I'm trying to retrieve the scrollTop value from the .uc-card element. public container = document.querySelector(".uc-card"); In my $onInit, I have: public $onInit() { this ...
I have successfully developed a JavaScript library module with browserify --standalone, passing all tests using npm test. Now, I am working on creating a demo application that will utilize this library module in a browser setting. When I run npm update, th ...
I am currently working with a template-driven form and facing an issue. Despite receiving true or false values, I actually need to retrieve the value of checkboxes. <form #f = "ngForm" (ngSubmit) = "onClickSubmit(f.value)"> ...
I recently started working with Node.js to develop an online game that acts as a server-side application. This application serves the .html and .js files to the client while managing the game's logic. I'm utilizing Socket.io for communication bet ...
I am utilizing a REST API in jSON format to fetch records. My Approach The REST API retrieves records in jSON format. Initially, I retrieve the top 6 records, along with an additional jSON node containing a forward paging URL. This URL is assigned t ...
I am facing an issue with my Angular component code. Here is the code snippet: i=18; onScrollDown(evt:any) { setTimeout(()=>{ console.log(this.i) this.api.getApi().subscribe(({tool,beuty}) => { if (evt.index == ...
Hi there! I'm currently working on a menu and I want the clicked item to become active, switching the active state to another item when clicked. However, my current implementation is not working as expected. Any assistance would be greatly appreciated ...
I am presented with the following code snippet that I did not author: render: function () { if(this.state.loading){ return <div><span><i className="fa fa-spinner fa-spin"></i> Loading...</span></div& ...
What is the most effective method for sorting them by timestamp using jquery or plain JavaScript? [{"userName":"sdfs","conversation":"jlkdsjflsf","timestamp":"2013-10-29T15:30:14.840Z"},{"userName":"sdfs","conversation":"\ndslfkjdslkfds","timestamp" ...
I'm working on a project with 2 sources and I need to import a file from MyProject into nest-project-payment. Can you please guide me on how to do this? Here is the current file structure of my project: https://i.stack.imgur.com/KGKnp.png I attempt ...
In my model class, I have defined an optional property as follows: export class Workflow { constructor( public id: number, public started: Date, public documentId: number, public document: Document, public status: WorkflowStatus, ...
I am currently looking for a solution to reverse my Firebase list in real-time. For instance: Let's say I have the following Firebase list: {apple, orange, banana}; == After reversing => {banana, orange, apple} If I were to add a new item (with ...
I am facing an issue where I want to update the value of a textbox using AJAX on keypress event, but the controller is not receiving any value to perform the calculation (it's receiving null). <script> $('#TotDiscnt').keypress(fu ...
Is it possible to retrieve keys from a JSON object in the exact same order they were originally received? The use of Object.keys(company).length currently seems to be functioning, but I am seeking reassurance that this method will consistently deliver acc ...
I need help updating my Angular version from 5 to 6 and I'm following these steps: Want to upgrade project from Angular v5 to Angular v6 After running the commands ng update @angular/cli and ng update @angular/core, I encountered the err ...