如何将类名称添加到Angular2指令

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 ?

Answer 1

@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;
}

Answer 2

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.

Answer 3

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.