angular - body tag class name inside ngif condition

Question

Body tag can have two possible class name dark and light, what is the best way to check which class is active inside HTML without declaring variables in .ts file

<body class="dark"></body>
       or
<body class="light"></body>

<img *ngIf="If body is having class name 'dark' show this">
<img *ngIf="If body is having class name 'light' show this">

I tried this, But not working

<img *ngIf="document.body.className === 'dark'">

https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass This could help. — A. van Hugten, Aug 27 '19 at 06:52

M. Sgarbossa · Answer 1 · 2019-08-27T06:53:43.883

0

Couldn't you just add a variable in your component and check that var in your img and body *ngIf?

<body [class]="myVar=="dark" ? 'dark' : 'light'">
<img *ngIf="myVar='dark'">

edited Aug 27 '19 at 06:53

answered Aug 27 '19 at 06:51

M. Sgarbossa

105
1
1
11

This is not feasible when you have many components, so searching for a solution with logic involves only inside HTML!! – ksh Aug 27 '19 at 06:53

score 0 · Answer 2 · answered Aug 27 '19 at 06:53

0

Use a variable to set both the theme and the img

theme = 'dark' ;

<body ng-class="{theme === 'dark' ? 'dark' : 'light'}"></body>
<img *ngIf="theme == 'dark'"> 
<img *ngIf="theme !== 'dark'">

answered Aug 27 '19 at 06:53

gavgrif

15,194
2
25
27

In this solution, we need to declare the theme variable in all components!! So I'm looking for a solution using only HTML, so that it will eliminate declaring theme variable in all the components!! – ksh Aug 27 '19 at 06:58

Vicky Kumar · Answer 3 · 2019-08-27T07:59:12.147

There are many possible approach already mentioned in other answers, Since we need to solve this problem without using ts or js

We can solve it using css and HTML only

Approach here is despite of adding ngIf to load different image we can use css to load different image

<body class="dark">
<img class="image-replacement"  />


</body>

.dark .image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

.light .image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://ashlandtech.org/wp-content/uploads/2014/09/1.png) no-repeat;
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

Please find Working fiddle linkhttps://jsfiddle.net/vickykumarui/4po9hu6g/

As far as your code is concerned it is correct There may be one reason why it is not working is because document is not injected in your angular component Once you inject document in your angular component it will start working

import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(@Inject(DOCUMENT) private document: Document) {}
}

Please find working demo of the approach you followed https://stackblitz.com/edit/angular-qighyt

score 0 · Answer 4 · answered Aug 27 '19 at 16:07

0

<body class="light" #classref>
    <img *ngIf="classref.className === 'dark'" title="dark">
    <img *ngIf="classref.className === 'light'" title="light">
</body>

You can set reference variable for elements.Here I used classref as reference variable for body element, so we can check the class name by *ngIf.

answered Aug 27 '19 at 16:07

Diya

45
2
7

This will work only in root component since body tag will not present in the child components – ksh Aug 28 '19 at 04:03

angular - body tag class name inside ngif condition

4 Answers4