Angular 7, adding class to component

3
votes

I want to dynamically append a blurred class to my angular components. My app.component.html file looks like this:

<app-navbar [ngClass]="{blurred: shouldBlurComponent}"></app-navbar>

<div class="main">
  <div [ngClass]="{blurred: shouldBlurComponent}">
    <app-header></app-header>
  </div>
  <div class="router-outlet">
    <router-outlet ></router-outlet>
  </div>
  <app-footer [ngClass]="{blurred: shouldBlurComponent}"></app-footer>
</div>

My blurred class looks like this:

.blurred {
  -webkit-filter: blur(5px) grayscale(90%);
}

It produces an effect like this (my layout is destroyed): enter image description here As you can see it works correctly only for app-header component because it is wrapped in div selectors. Unfortunately similar trick does not work for other components. I also tried to apply blurred class directly inside of my app-navbar and app-footer component and it works like it supposed to. enter image description here

How can I add correctly my blurred class to my child component from my app.component.html? If it is possible I want to avoid passing it as a parameter.

EDIT:
app-footer html

<footer class="fixed-footer">
  <div class="row">
    <div class="col-md-5">
      <a>{{'footer.adminContact' | translate}}</a>
    </div>
    <div class="col-md-5">
      {{'footer.disclamer' | translate}}
    </div>
  </div>
</footer>

app-footer ts

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app-footer css

.fixed-footer{
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #5e5e5e;
  border-color: black;
  color: black;
  text-align: center;
  padding: 30px;
  border-top:  2px black solid;
  z-index:1;
}

EDIT2:
I've made a simple demo Working demo here:

2
angularcss
post the app-footer html and ts - Sachila Ranawaka
Can you please create demo of it using stackblitz? - Just code
@Justcode I updated my question with a demo - pokemzok
@SachilaRanawaka Done - pokemzok

2 Answers

1
votes

Blurred sounds like a global class, and should be added to the styles.css file, or in any other global stylesheet you have in your application.

The reason it's not working though, is because the elements by default have display: inline. Which results that they have no dimensions inside your application, only the child components have dimensions

Add this to the stylesheet:

app-header,
app-footer,
app-navbar {
  display: block;
}

The real reason it's not working is because you are using fixed positioning. According to the html specs, whenever an element has a filter, it becomes the new containing block for absolute and fixed position descendants. This means that any child of an element with a filter will be positioned according to the filtered item.

My advice is to have a better look at how to structure your application. Not use float/fixed for your structure. But have a look at display flex, or grid

Also, you should use filter: blur(5px) grayscale(90%);. The webkit prefix is no longer necessary, and this way you support more browsers. If you use the angular cli, you don't need to add prefixes at all, because they get automatically added based on the browser support mentioned in the .browserslistrc file

0
votes
.blurred {
  -webkit-filter: blur(5px) grayscale(90%);
}

add this into style.css

Add shouldBlurComponent in (BlurredService) service file. and create function to check

checkStatus() {
if (this.BlurredService.shouldBlurComponent) {
      return 'blurred';
    }
}

In HTML [ngClass]="checkStatus()" Add this one.