Customize component in Angular2/4 depending on where it is used

Question

I have the following components in my application:

NavbarComponent
HomeComponent
ClassroomComponent

I use NavbarComponent in both HomeComponent and ClassroomComponent like this:

// home.component.html 

<app-navbar></app-navbar>
..something related to HomeComponent

// classroom.component.html

<app-navbar></app-navbar>
..something related to ClassroomComponent

I want to customize navbar depending on where it is used: for example, if it's used in HomeComponent, I want it to be red, and if otherwise, then set its color to green. Is there any way I can do this?

I haven't tried it myself, but I think you'd need to use the router for that. — Iskandar Reza
– Iskandar Reza, Commented Sep 28, 2017 at 23:46
Yeah, not exactly what you want but maybe you can code something based on this: toddmotto.com/dynamic-page-titles-angular-2-router-events — Iskandar Reza
– Iskandar Reza, Commented Sep 28, 2017 at 23:47

cyr_x · Accepted Answer · 2017-09-28 23:53:28Z

1

You can try to use the :host-context selector to define the component styles based on it's ancestor.

For your example it should be working like this:

// inside app-navbar css file
// where 'home-component' is the selector of your HomeComponent
:host-context(home-component) {
  background: red; // NavbarComponent is red when inside HomeComponent;
}

:host-context(classroom-component) {
  background: blue; // NavbarComponent is blue when inside ClassroomComponent;
}

More about special CSS selectors can be found here.

answered Sep 28, 2017 at 23:53

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vitdev Over a year ago

Thank you, it has helped! One more question. In my case, navbar has a complex structure with usage of different classes. Is there any way I can affect not only navbar itself, but also its child classes? Something like this:

:host-content(home-component) {        background: red;                .topnav a {               text-align: center;        }

cyr_x Over a year ago

You could just target children like: :host-context(my-selector) .child-class { ... }. If you want to target children inside child components you should look at the ::ng-deep selector.

Dr. X · Accepted Answer · 2017-09-28 23:53:16Z

0

You can change your component in different ways

By using Provider(injection) to access global values
By using Event (publisher/subscriber methodology) procedure http://learnangular2.com/events/
You can define a @Input decorator in the NavbarComponent https://github.com/ionic-team/ionic/issues/5741 or http://www.concretepage.com/angular-2/angular-2-custom-event-binding-eventemitter-example

answered Sep 28, 2017 at 23:53

Dr. X

2,9402 gold badges18 silver badges37 bronze badges

Collectives™ on Stack Overflow

Customize component in Angular2/4 depending on where it is used

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related