how can i edit the contents or the styles of a reused (reusable) component without changing the other in angular

Issue

i have a component called search-footer component which i am using as a search bar and as a footer, i want to change a bit of the content and styles of the footer without affecting the search-bar how can i achieve this?

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-search-footer></app-search-footer> //this needes content and styles updating

i use the search-footer component inside the navbar component and in my HomeComponent as you can see

Solution

You can e.g. use Input to control this like

<app-search-footer version='search'></app-search-footer>

In the component:

@Input() version: 'search' | 'footer' = 'footer';

In the component template at the respective spots:

class="some-element {{version}}"

In the css (scss in this case) e.g.:

.some-element {
  &.search {
    background-color: red;
  }

  &.footer {
    background-color: green;
  }
}

How to best do this of course also depends on what needs to be changed (like if it is the whole component or very specific parts of it).
If it is the whole component, you could also simply do <app-search-footer class='search'></app-search-footer>.

There are quite a few ways to accomplish things like this before having to rely on :host ::ngdeep.

Answered By - Gunnar B.