Angular 7, adding class to component

Question

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): 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.

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:

post the app-footer html and ts

Sachila Ranawaka
– Sachila Ranawaka

2018-12-28 10:02:21 +00:00
Commented Dec 28, 2018 at 10:02 — Sachila Ranawaka
– Sachila Ranawaka, Commented Dec 28, 2018 at 10:02
Can you please create demo of it using stackblitz?

Just code
– Just code

2018-12-28 10:03:53 +00:00
Commented Dec 28, 2018 at 10:03 — Just code
– Just code, Commented Dec 28, 2018 at 10:03
@Justcode I updated my question with a demo

pokemzok
– pokemzok

2018-12-28 10:29:21 +00:00
Commented Dec 28, 2018 at 10:29 — pokemzok
– pokemzok, Commented Dec 28, 2018 at 10:29
@SachilaRanawaka Done

pokemzok
– pokemzok

2018-12-28 10:49:46 +00:00
Commented Dec 28, 2018 at 10:49 — pokemzok
– pokemzok, Commented Dec 28, 2018 at 10:49

Poul Kruijt · Accepted Answer · 2018-12-28 10:54:15Z

1

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

edited Dec 28, 2018 at 10:54

answered Dec 28, 2018 at 10:04

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

pokemzok Over a year ago

I updated my question with a demo link. Already tried your solution there and it did not work. Could you take a look?

Poul Kruijt Over a year ago

Mm, what do you expect? I see everything blurred except the text ' I am not blurred'. Isn't that what you want?

pokemzok Over a year ago

It destroys my layout. Look at the second picture attached to the question or just remove blurred class from app.component.html in my demo to see the correct layout

Poul Kruijt Over a year ago

@pokemzok alright, I understand now. Didn't see you were using fixed positioning :) I've updated my answer. It's not an answer you can directly copy though, because it would take too long to rewrite for me. Anyways, bottom line.. rewrite your structure to not use position:fixed

Poul Kruijt Over a year ago

@pokemzok glad you could make it work, you're welcome!

|

Akshay Pamnani · Accepted Answer · 2018-12-28 10:53:49Z

0

.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.

answered Dec 28, 2018 at 10:53

Akshay Pamnani

215 bronze badges

Collectives™ on Stack Overflow

Angular 7, adding class to component

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related