How to add Class name to Angular2 directive

Question

I wish to add a class name to NG2 directive in order to apply CSS rules on it. Given the following component:

@Component({
  moduleId: module.id,
  selector: 'search-form',
  templateUrl: 'search-form.component.html',
  styleUrls: [ 'search-form.component.css']
})

I tried this:

search-form {
  width:100%;
  display:block;
}

But it did not work.

How can I add a class to search-form ?

CSS, for styling - I need to container (search-form) to have 100% width for example — Yuvals, Oct 25 '16 at 15:11
@Yuvals you need to do that in the template where you *use* it: ``, for example. — jonrsharpe, Oct 25 '16 at 15:15
Looks like a dup of http://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element — Günter Zöchbauer, Oct 25 '16 at 15:20
What you tried is CSS that is applied to `` but it is unrelated to "class". — Günter Zöchbauer, Oct 25 '16 at 15:21
Yes, I tried to refer also as "html" tag. Obviously this didn't work — Yuvals, Oct 25 '16 at 15:27

Günter Zöchbauer · Accepted Answer · 2016-10-25T15:25:17.963

2

@Component({ // or @Directive({
  // use `host:` or `@HostBinding()` (not both)
  // host: {'[class.someclass]': 'true'}
})
class SearchFormComponent {
  @HostBinding('class.someclass')
  someClass = true;
}

Perhaps you mean adding styles to "self" by adding this CSS to search-form.component.css

:host {
  width:100%;
  display:block;
}

edited Oct 25 '16 at 15:25

answered Oct 25 '16 at 15:17

Günter Zöchbauer

623,577
216
2,003
1,567

What is the :host in this case? should I point to a child:host? – Yuvals Oct 25 '16 at 17:39
`:host` points to the component itself - the DOM element that hosts the component. From your question it's not clear to me what your problem actually is. If you provide more information, I might be able to provide a better answer. – Günter Zöchbauer Oct 25 '16 at 17:42

score 0 · Answer 2 · answered Oct 25 '16 at 15:13

You declare CSS classes in your stylesheet .. search-form.component.css

If you want to target the component in your stylesheet then you could do ...

search-form {
  width:100%;
  display:block;
}

This will target elements with the tag search-form.

Because Angular2 is component based, it only targets elements inside the component. I am not sure if it will target the actual element itself but I think it will.

user7070321 · Answer 3 · 2016-10-25T15:37:27.597

-1

I can show an example of this.

Firstly create a stylesheet. like

<style>
.red
{
color:red;
}
.blue
{
color:blue;
}
</style>

Then in your HTML include your style sheet along with angular.min.js and create a dropdown as below.

<select ng-model="a">
<option value="red">red</option>
<option value="blue">blue</option>

</select>

Then create a H1 tag like below.

<h1 ng-class="a">Header color</h1>

Note. HTML has to be within the div of ng-app you create.

Hope this helps. All the best.

edited Oct 25 '16 at 15:37

answered Oct 25 '16 at 15:24

user7070321

11
2

The question is about Angular2. Your answer seems to be about AngularJS. – Günter Zöchbauer Oct 25 '16 at 15:38

How to add Class name to Angular2 directive

3 Answers3