Assign a value to the class attribute of the body element using ngClass

Question

Assign a value to the class attribute of the body element using ngClass

Currently, I am trying to change the value of a class based on whether a user is signed in or not. I have checked the code in both app.component.ts and login.component.ts as shown below;

app.component.ts

export class AppComponent {
  isAuthenticated:boolean;
  constructor(private auth:Auth){
      this.isAuthenticated=this.auth.authenticated();
  }
}

login.component.ts

 export class LoginComponent {
  isAuthenticated:boolean;   
  constructor(private auth:Auth){
    this.isAuthenticated=this.auth.authenticated();
  }
}

and index.html

<body [ngClass]="{
  'dashboard site-navbar-small' :isAuthenticated,
  'login-form login-form-second page-login-second' :!isAuthenticated
}">
  <app-root>Loading...</app-root>

Unfortunately, it seems that the changes are not being applied correctly. Here is how it appears in the browser: https://i.sstatic.net/Zl8EA.png

angular typescript

Answer 1

Answer №1

Have you considered refactoring the logic out of the constructors and into separate functions instead? How do you envision this working? Can you elaborate on the specifics of the code logic?

app.component.ts

export class AppComponent {
  isLoggedIn: boolean = false;

  private toggleLoginStatus(){
     this.isLoggedIn = !this.isLoggedIn;
  }
}

login.component.ts

 export class LoginComponent {
  isLoggedIn: boolean = false; 

   private toggleLoginStatus2(){
     this.isLoggedIn = !this.isLoggedIn;
  }
}

index.html

<body [ngClass]="{ 
  'dashboard site-navbar-small': isLoggedIn,
  'login-form login-form-second page-login-second': !isLoggedIn
}">
</body>

Edit

It seems like you are trying to assign a function to a boolean variable. Is this the intended approach?

this.isLoggedIn = this.auth.isAuthenticated();

Answer 2

Have you considered refactoring the logic out of the constructors and into separate functions instead? How do you envision this working? Can you elaborate on the specifics of the code logic?

app.component.ts

export class AppComponent {
  isLoggedIn: boolean = false;

  private toggleLoginStatus(){
     this.isLoggedIn = !this.isLoggedIn;
  }
}

login.component.ts

 export class LoginComponent {
  isLoggedIn: boolean = false; 

   private toggleLoginStatus2(){
     this.isLoggedIn = !this.isLoggedIn;
  }
}

index.html

<body [ngClass]="{ 
  'dashboard site-navbar-small': isLoggedIn,
  'login-form login-form-second page-login-second': !isLoggedIn
}">
</body>

Edit

It seems like you are trying to assign a function to a boolean variable. Is this the intended approach?

this.isLoggedIn = this.auth.isAuthenticated();

Answer 3

Answer №2

In the structure of an angular application, the root component is located within the body tag. This means that direct binding to the body tag is not possible. More information can be found in the Angular 2 documentation.

Currently, Angular provides the Title service as a way to manage the title of the page.

export class AppComponent {
  title = 'app works!';
  public constructor(private titleService:Title){
    this.titleService.setTitle('My ToDo');
  }

If you need to manipulate the body tag, you can use setElementClass on plunker, or alternatively, utilize JQuery.

setElementClass(document.body, "dashboard site-navbar-small", isAuthenticated)
setElementClass(document.body, "login-form login-form-second page-login-second", !isAuthenticated)

Answer 4

In the structure of an angular application, the root component is located within the body tag. This means that direct binding to the body tag is not possible. More information can be found in the Angular 2 documentation.

Currently, Angular provides the Title service as a way to manage the title of the page.

export class AppComponent {
  title = 'app works!';
  public constructor(private titleService:Title){
    this.titleService.setTitle('My ToDo');
  }

If you need to manipulate the body tag, you can use setElementClass on plunker, or alternatively, utilize JQuery.

setElementClass(document.body, "dashboard site-navbar-small", isAuthenticated)
setElementClass(document.body, "login-form login-form-second page-login-second", !isAuthenticated)

Assign a value to the class attribute of the body element using ngClass

Answer №1

Answer №2

Similar questions

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?

When triggering the event: Was anticipating a spy, however received a Function instead

Testing an Angular component using Jasmine within a project with multiple module files

Sharing data between components in Angular 4: Passing objects between different parts of your

Using an Object as a Key in Maps in Typescript

Combining data types to create a unified set of keys found within a complex nested structure

Angular - Navigate to Login Page post registration and display a confirmation message

What is the process for implementing a type hint for a custom Chai assertion?

I am experiencing an issue with mydaterangepicker and primeng where it is not displaying properly in the table header. Can anyone assist me with this

Even though the Web API has CORS Policy set up, it is still being blocked

Combining SignalR and Angular: Steps for incorporating a Bearer token into Http Headers

I was unable to showcase various maps

Create a class with additional attributes to support different types of options

Can you explain the distinction between inheritance and union types in regards to portraying polymorphism?

Exploring the Functionality of HTML Anchor Link Fragment within Angular 6

What could be the reason for the Angular dropdown values not appearing?

I am unable to get the radio button checked in Angular 2

Problem with Extending Jest Matchers in VS Code TypeScript

Challenge with React CloneElement regarding typing

Issues with hydrating React local storage hook in custom implementation within NextJS