setting background image on particular component angular

Question

how to set a background image for a particular component of angular? Not for the whole app. How can I achieve that. I have seen index.html implementations but it goes for the whole app

<div class="navbar navbar-default">
  <div class="container">
    <div id="navbar-main">
      <ul class="nav navbar-nav">
        <li><a routerLink="/">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li *ngIf="!auth.isLoggedIn()"><a routerLink="/login">Sign in</a></li>
        <li *ngIf="!auth.isLoggedIn()"><a routerLink="/register">Sign up</a></li>
        <li *ngIf="auth.isLoggedIn()">
          <a routerLink="/profile">{{ auth.getUserDetails()?.name }}</a>
        </li>
        <li *ngIf="auth.isLoggedIn()"><a (click)="auth.logout()">Logout</a></li>
      </ul>
    </div>
  </div>
</div>

I want to set background image for router-outlet component

<router-outlet></router-outlet>

yes this the main component in which router-outlet refers to home component indirectly i have to set background image on home component which will come below navigation — utk
– utk, Commented May 31, 2018 at 15:21
I believe you need to set it on the component you are loading into router outlet, not the home component. For example, the login component or register. — ShellNinja
– ShellNinja, Commented May 31, 2018 at 15:22

davecar21 · Accepted Answer · 2018-05-31 16:01:46Z

1

You can try to enclose all your content in a div that will holds all your content on each component that you wanted to have a background and set its background:url(''),. For example Inventory component and Order Component.

In Inventory and Order Component, create a div which holds the content.

<div class="inventory-body">
Some Contents Here...
</div>

Then in Inventory and Order Component css set its background

.inventory-body{
  color:white;
  padding: 20px;
  background: url('image/directory');
}

Please see this link for live sample code. https://stackblitz.com/edit/so-answer-ng-routebg

answered May 31, 2018 at 16:01

davecar21

2,6741 gold badge24 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

setting background image on particular component angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related