I have an angular 6 app and I am trying to apply another CSS class to one of my app ponents in the appponent.html file. Basically, I want to change the color of the footer of my app based on a condition, and all other cases don't show the footer. So, my code looks like this:

appponent.html

<router-outlet></router-outlet>
<my-footer [ngClass]="{ 'my-class' : true }"></my-footer>

my-footer.css

:host {
    background-color: black;
    color: white;
}

.my-class {
    background-color: red;
}

Is it possible to use [ngClass] this way, where the class exists in the ponent I am applying the condition to itself? I found if I put .my-class in the appponent.css file, then it works as expected. However, I want to keep my styles together in the ponents where they belong.

Thanks!

I have an angular 6 app and I am trying to apply another CSS class to one of my app ponents in the app.ponent.html file. Basically, I want to change the color of the footer of my app based on a condition, and all other cases don't show the footer. So, my code looks like this:

app.ponent.html

<router-outlet></router-outlet>
<my-footer [ngClass]="{ 'my-class' : true }"></my-footer>

my-footer.css

:host {
    background-color: black;
    color: white;
}

.my-class {
    background-color: red;
}

Is it possible to use [ngClass] this way, where the class exists in the ponent I am applying the condition to itself? I found if I put .my-class in the app.ponent.css file, then it works as expected. However, I want to keep my styles together in the ponents where they belong.

Thanks!

• javascript
• angular
• angular6

4 Answers 4

Using the selector :host.my-class appears to work, as shown in this stackblitz.

my-footer.css

:host {
    background-color: black;
    color: white;
}

:host.my-class {
    background-color: red;
}

app.ponent.html

<my-footer [ngClass]="{ 'my-class' : condition }"></my-footer>

Keep your ponent style inside the ponent. You want to change your approach to:

<my-footer *ngIf="ifMyCondition === true"></my-footer>

In this case, It will only construct the footer if your condition is true.

UPDATE--
As you mentioned in your ment, I still suggest you to handle ponents needs inside the ponent and not rely on outsource (in your case the parent?) to change the ponent properties. So I will suggest you to use Input() in your child to get the status of your condition from your parent, and then handle it how ever you want.

Parent:

someCondition: boolean;

HTML :

<my-footer [condition]="someCondition"></my-footer>

Child:

@Input() condition: boolean;

And now, each time your condition changed in your parent, The bind with the child will keep update him so you can manage what ever you need in you child ponent based on the condition that bind in the parent.

You can apply your class based on a condtition.

You can do something like this:

app.ponent.html

<router-outlet></router-outlet>
<my-footer [ngClass]="{ 'my-class' : displayFooterBg() }"></my-footer>

app.ponent.ts

displayFooterBg = () => {
  if (this.condition === true) {
    return true;
  } else {
    return false;
  }
}

You can give the class as an input to the child ponent.

Parent (HTML):

<my-footer [classValue]="class1"></my-footer>

Child (TS):

@Input() public classValue = 'default-class';

Child (HTML)

<div ngClass = {{classValue }}></div>