I'm encountering an issue with my components: 1. I cannot seem to style html and body in signin.component.css for some reason. The workaround I found was using:
encapsulation: ViewEncapsulation.None ==> This works perfectly
However, when I switch views, for example, to home, the styles from signin.component.css get inherited by the home component.
Is there a mistake somewhere? Or does anyone have a solution to styling html and body in CSS components?
Thank you in advance.
It's not recommended to change encapsulation frequently. Instead of directly changing classes and styles in components, consider creating a state service that handles these changes.
A possible implementation could be like the following:
service
import { Injectable } from '@angular/core';
@Injectable()
export class StyleService {
private className: Subject<string> = new Subject<string>();
public className$: Observable<string> = this.className.asObservable();
set(className: string): any {
this.className.next(className);
}
}
To listen for changes:
...
private sub: Subscription;
...
this.sub = this.styleService.className$
.subscribe(class => {
// perform necessary actions
})
...
ngOnDestroy() {
// prevent memory leaks
this.sub.unsubscribe();
}
Simply call the set function when you want to change classes. Make sure to declare the classes in the main styling file.
If you need an initial className value, you can use BehaviorSubject as shown below:
private class: BehaviorSubject<string> = new BehaviorSubject<string>('className');
After some investigation, I managed to pinpoint the issue on my own.
A big thank you to everyone who offered their assistance during this troubleshooting process.
The root of the problem was discovered to be the inability to edit html and body html tags within component css. The correct approach is to eliminate the ViewEncapsultation and insert the following code snippets into the constructor:
document.body.style.backgroundImage = 'url(\'../../../assets/images/background.jpg\')';
document.body.style.backgroundSize = 'cover';
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.height = '100%';
By incorporating these lines of code, it becomes possible to apply styles to html and body tags within any component, including the overall background.
I am facing an issue with highlighting a row in a table when a barcode is entered. Despite following similar scenarios and checking my code, the CSS doesn't seem to be applied. Can anyone help me figure out what I'm missing or how I can fix this? ...
I am having difficulty creating an HTML table using JavaScript with JSON input. In my code, I'm using a placeholder in the HTML that will be filled by a innerHTML call in Javascript: for (var i = 0; i < json.data.length; i++) { listItem = json. ...
I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...
I am currently in the process of unit testing a function that looks like this: async fetchGreatHouseByName(name: string) { const [house] = await this.httpGetHouseByName(name); const currentLord = house.currentLord ? house.currentLord : '957'; ...
Working with Angular using the container/presentation pattern and Ngxs presents a challenge for me. The issue I am facing is that I have one container component nested within another container component, both calling the same @Select: @Select(State.example ...
There are numerous popups on a page with the overflow:auto property. The structure is as follows - <div id="popup1"> <div>SomeHTMLSTRUC</div> <div>SomeHTMLSTRUC</div> <ul class="scroll"></ul> </div> ...
Hello, I am currently in the process of developing my very first Angular application and could use some assistance. Specifically, I am working on a component that serves as an image search box. When a user inputs a search query, a request is sent to an API ...
How can I identify which button was clicked in a form without using a hidden input field and JavaScript to set different values for each button? You can check out an example demonstrating this technique here: Is there a more straightforward way to achiev ...
Having some trouble with Angular2 as I explore it for the first time, specifically in creating and using a service. I've set up a data service like this: import {Injectable} from 'angular2/core'; import {recentActivity} from './app/com ...
I have encountered an issue while testing my class that relies on a single dependency, which is a service. Despite trying various methods such as using stubs, I am still facing the problem of an undefined method. https://i.stack.imgur.com/A3by2.png Testin ...
I attempted to run an Angular project using nxMonorepo and made sure to install all the necessary node modules. However, when I tried running the command "nx migrate --run-migrations" in my directory PS C:\Users\Dell\Desktop\MEANAPP&bso ...
I am having some difficulties with using bootstrap switch. I have tried the examples provided on , but regardless of the classes I apply, the buttons remain the same small size and the text for ON and OFF is barely visible. I can't seem to figure out ...
I am currently delving into the world of typescript. After exploring various sources like this one and that one, as well as trying out multiple solutions, I have encountered a challenge. I have a variable named incomingArticleObject which needs to be of ty ...
Check out this interactive shopping list. You can add items, delete them, and mark them as completed. Adding and deleting items works fine, but there's an issue when toggling them. Issue (occurs when toggling multiple list items) If you add 3 items ...
Recently, I've delved into learning Angular 2. My current challenge involves making http get requests to retrieve data and then constructing objects from that data for later display using templates. If you believe my approach is incorrect, please feel ...
I attempted to create a button, but it's not functioning correctly. It should display 'Submit', but instead, it just shows a square. Since I haven't learned CSS yet and my online video instructor hasn't covered it either, I need as ...
I am facing an issue with two containers stacked on top of each other. The bottom container is wider than the top one, and both have auto margins set for the left and right sides. I want the top container to be aligned evenly on top of the bottom one. I c ...
While working on an animated dropdown for a navbar, I came across this interesting dilemma. In a strict React setup, you can use an inline if/else statement with onClick toggle to manage CSS animation styles. To ensure default styling (no animation) when ...
My friend and I recently had a disagreement about a file in our project called experiment-row.component.html. The code in question looked like this: *ngIf="experimentsPageService.isRegularStatusIconVisible(experiment)" I argued that it is not go ...
After updating the angular website version on IIS, I am facing an issue where the old version continues to appear in the browser even after stopping the site. How can I ensure that the new version of the website is displayed correctly? I have not implemen ...