When it comes to styling my login page, I have specific stylesheets that I include in login.component.ts. For all the common CSS files, I have added them in the root index ("index.html") using the traditional method. However, after a user logs into the system, I expect the app.component.css file to take control of the body and change the background color. Strangely, the background color remains as it was on the login page.
The strange thing is, when I refresh the page (reload), the issue disappears. However, the main attraction of using Angular 2 is the ability to create single-page apps without the need for refreshing. So, how can I handle this problem?
Below is an excerpt from my login.component.ts:
import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
import { Auth } from '../auth/auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: [
'../../assets/css/colors/cyan.css',
'../../assets/css/login-page/form.css',
],
encapsulation: ViewEncapsulation.None,
})
export class LoginComponent {
@HostBinding('class') siteNavbarSmallClass = 'login-form login-form-second page-login-second';
constructor(private auth: Auth) {}
}
And here is a snippet from app.component.ts:
import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
import { Auth } from './auth/auth.service';
@Component({
selector: 'body',
templateUrl: './app.component.html',
styleUrls: [
'assets/css/global/slidePanel.min.css',
'assets/css/colors/default.css',// this is the css file I want to use for others.
],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
@HostBinding('class') siteNavbarSmallClass = 'dashboard site-navbar-small';
constructor(private auth: Auth){}
}
In summary, even after thorough investigation with screenshots, the issue persists - the CSS attributes for the body element remain unaffected by the changes made in the app.component. Below are some visuals to illustrate the problem:
Login Page:
https://i.sstatic.net/YZdkG.png
After Logging In:
https://i.sstatic.net/I6csB.png
After Reloading (Expected Outcome):
https://i.sstatic.net/JSjxm.png
If anyone has any insights or solutions on how to prevent the CSS properties of the login component from affecting other components (specifically app.component), your help would be greatly appreciated!