How to style a sibling component in Angular2?

Question

I have a search component containing a logo, a searchbar and a routeroutlet. The execution of a search navigates to the resultlist, which is the pseudo html outlined here:

<search>
  <logo></logo>
  <searchbar></searchbar>
  <result-list></result-list>
</search>

I like to style logo and searchbar differently on the results page so I tried to select the logo with :host >>> logo and the /deep/ alternative from the result-listcomponent. That doesn't work. Is there a way to select siblings?

Here a small plnkr to demonstrate the problem. http://plnkr.co/edit/Q0CLjcsftbqe0kHKrKks?p=preview Here I would like to style from resultlist the logo and the searchbarto be black.

dep of http://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file — micronyks, Dec 30 '16 at 08:01
I read that post, that is from the parent and not from a sibling. — Matthias Baumgart, Dec 30 '16 at 08:04
I got your point but I don't think there is any way to style a sibling component from sibling. either you can do it from parent or child. — micronyks, Dec 30 '16 at 08:36
Ok. I guess then I'll need to give the logo and searchbar component a parameter to add a style class for the result-page. Kind of contradicts the component approach. — Matthias Baumgart, Dec 30 '16 at 08:42

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

A Similar solution to the one from Jens Habegger using :host-context(myCssClass) and a conditional. The style needs to be added to the logo and the searchbar component.

<search>
  <logo [class.myCssClass]="isSearchResultList"></logo>
  <searchbar [class.myCssClass]="isSearchResultList"></searchbar>
  <result-list></result-list>
</search>

:host-context(.myCssClass) {
  color: black;
 }

edited May 23 '17 at 10:31

Community

1
1

answered Dec 30 '16 at 10:02

Matthias Baumgart

905
1
9
22

score 1 · Accepted Answer · answered Dec 30 '16 at 09:20

1

What you are attempting is basically sharing global application state isSearchResultList: boolean across multiple components.

The obvious naive solution would be to hold the state at the respective shared parent component, and set it based on the current router-outlet.

<search>
  <logo [isSearchResultList]="isSearchResultList"></logo>
  <searchbar [isSearchResultList]="isSearchResultList"></searchbar>
  <result-list></result-list>
</search>

answered Dec 30 '16 at 09:20

Jens Habegger

5,266
41
57

I hoped to not put a state in there. Similar solution below. – Matthias Baumgart Dec 30 '16 at 09:54
I can relate to that, I'd be interested in alternative approaches as well. – Jens Habegger Dec 30 '16 at 09:55

score 0 · Answer 3 · answered Aug 11 '17 at 10:16

You can use services for communication between components and ngClass for dynamic styling.

notification.service.ts

import {Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class NotificationService {
  private static _emitters: { [ID: string]: EventEmitter<any> } = {};

  static get(ID: string): EventEmitter<any> {
    if (!this._emitters[ID]) {
      this._emitters[ID] = new EventEmitter();
    }
    return this._emitters[ID];
  }
}

When sibling component run send a message.

bar.component.ts

import { NotificationService } from 'notification.service';
....
ngOnInit() {
      NotificationService.get('barcomponent').emit(true);
  }
  ngOnDestroy() {
      NotificationService.get('barcomponent').emit(false);
  }
...

Listen to incoming messages from your component.

foo.component.ts

import { NotificationService } from 'notification.service';
....
ngOnInit() {
    NotificationService.get('barcomponent').subscribe(value => {
        this.activateStyle = value;
    });
  }
....

You can apply any class via ngClass

foo.component.html

....
<div [ngClass]="{'my-css-class':activateStyle}">
  ...
</div>
....

How to style a sibling component in Angular2?

3 Answers3