I have a <myComponent ></myComponent> and I want give class to myComponent?
This doesnt worked `<myComponent class="my-class"></myComponent>`
How can I do that?
-
what is the issue you are getting? are you trying to apply style from class within the content of component?Madhu Ranjan– Madhu Ranjan2016-09-27 14:07:26 +00:00Commented Sep 27, 2016 at 14:07
-
Yes @MadhuRanjan, I want give for example border color,width etc. to my control as one controlemanuel07– emanuel072016-09-28 06:44:14 +00:00Commented Sep 28, 2016 at 6:44
Add a comment
|
4 Answers
class MyComponent {
@HostBinding('class.my-class')
isMyClass:boolean = true;
}
answered Sep 27, 2016 at 14:11
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
6 Comments
emanuel07
Thank you,and where to use isMyClass property ?
Günter Zöchbauer
Sorry, I'm not sure I understand the question.
isMyClass is just a name I chose. The name doesn't matter. 'class.my-class' defines what class should be added or removed. The value of the property where @HostBinding() is prepended is used to determine if the class should be added or removed (true/false). The only thin where the name of isMyClass is relevent, is when you want to change the value like this.isMyClass = false;Günter Zöchbauer
Sorry, I don't know what you mean? What do you try to accomplish? What is not working with the code in your question?
emanuel07
Now it's works,formerly 'my-class' writenn in MyComponent's syleUrl's file. I replace it in styes.css (included in head) ,and everything is ok. I want understand your answer.
Günter Zöchbauer
The code in my answer just adds
my-class to the host element of the MyComponent component. You can now style it from the parent elements styleUrls: ['parent.css'] using :host my-component.my-class { ... } or from MyComponents styleUrls: [my-component.css'] using :host-context(.my-class) { ... } |
Don't think that will work but there are easy workarounds:
If you want to style the placement/color etc of your component:
Best workaround is to place your <myComponent></myComponent> inside a <div> and apply the class to that div
If you want to style the contents of your component:
adding styleUrls in your Component and styling your content with a css file
Comments
You can use @Input for your component and set external class in any place.
Example:
<myComponent [styleClass]="'my-class'"></myComponent>>
Your component
/my-component.component.ts
...
@Input() styleClass: string;
...
/my-component.component.html
<div [class]="styleClass" ngClass="my-component__container any-other-class">
Component works!
</div>
Comments
you can using host method
import {Component} from "@angular/core";
@Component({
selector: 'COMPONENT NAME',
templateUrl: 'COMPONENT URL',
host: {
'[class.CLASS NAME]': 'VARIABLE NAME'
}
})
export class componentName{
}
