All geek questions in one place

Unable to understand usage: host in components in Angular2

What I understood about the host is that if I have a child component inside the parent component and we want to create a child component from the parent component, we can use: host. and: host-context for the other way around. Please let me know if this is the correct use of the host.

https://angular.io/docs/ts/latest/guide/component-styles.html

When I try to do the same in my application, it works as an assistant professor

Application Component Template

  <div class ="top">
    <h1>
      Home Component
    </h1>
    <hr>
    <app-ngrx></app-ngrx>
    <router-outlet></router-outlet>
  <div>

ngrx component template

  <h3 class="mine">NGRX</h3>

<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>

<button (click)="reset()">Reset Counter</button>

CSS Application Component

:host(.mine){
  color:red;
}

This does not seem to work. Please help, I can not understand.

I looked at this question, but just could not understand

Angular 2: How is the host element style of a component?

Updated after @Gunter answer

In my app-ngrx template, I added

  <h3 class = "mine">NGRX</h3>

<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>

<button (click)="reset()">Reset Counter</button>

app-ngrx css

:host(.mine){
  color:red;
}

,

<app-ngrx></app-ngrx>

h3 , , , <app-ngrx class = "mine"></app-ngrx>

+4
2

, , , , : host. : host-context

, , .

:host DOM.

... . .

angular . . , :host, .

:

, my-app, <my-app> DOM. :

:host(.mine){
  color:red;
}

, .mine :

<my-app class="active">

app-ngrx, <app-ngrx> DOM, NOT <my-app>. :

:host(.mine){
  color:red;
}

, .mine :

<app-ngrx class="active">

: -

:host-context host, () , , . , .

,

:host(.mine){
  color:red;
}

:

<my-app class="mine">

:

:host-context(.mine){
  color:red;
}

:

<div class="mine">
 ...
   <my-app>

, ( ). h2 :

h2 {
   font-weight: bold;
}


:host-context(.make-inner-components-bold) h2 {
  font-weight: bold;
}

, .make-inner-components-bold.

+7
  • :host { ... }

  • :host(.mine) { ... } , class="mine" set

  • :host-context(.mine) { ... } , class="mine" set

. https://angular.io/docs/ts/latest/guide/component-styles.html

@Component({
  selector: 'h3', 
  styles: [':host(.mine) { color: red; }], 
  template: '<ng-content></ng-content>'}) 
class MyH3Component{}

<h3 class="mine">this is red</h3>
<h3>this is black</h3>

:host-context

@Component({
  selector: 'h3', 
  styles: [':host-context(.mine) { color: red; }], 
  template: '<ng-content></ng-content>'}) 
class MyH3Component{}

<body class="mine">
  <my-app><my-app>
<body>

AppComponent

template: '<h3>this is red</h3>'

class="mine"

<body>
  <my-app><my-app>
<body>

AppComponent

template: '<h3>this is black</h3>'

( ), /deep/

:host child /deep/ h3 {
  color: red;
}
+5

Source: https://habr.com/ru/post/1671378/

More articles:


All Articles