How can I use Angular 7 to create a background image for a View made up of multiple components?

Question

How can I use Angular 7 to create a background image for a View made up of multiple components?

Here is the HTML code that I am working with:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

My goal is to have an image set as the background for the home view, which consists of two components: navbarComponent and homeComponent (selectors). However, I do not want this background image to be applied to other components like contactComponent (which should use a different image) with the selectors app-navbar and app-contact.

Any suggestions on how I can achieve using an image as a background specifically for the view created by the app-navbar and app-home components?

html css angular bootstrap-4 angular7

Answer 1

Answer №1

If you want to set a background image for your website using CSS, one way to do it is by adding the background image as a CSS class for the <body> tag in your global styles.css file. Then, on the specific page or route where you want the background image to appear, you can add that class name to the <body> tag using either of these two options.

The first option is simple but not highly recommended:

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit(){
   this.document.body.classList.add('test');
}

The second option (my personal preference) involves implementing a custom rendering class from the @angular/core package:

import { Component, OnDestroy, Renderer2 } from '@angular/core';

export class myCoolComponent implements OnDestroy {

  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, 'test');
   }

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'test');
  }

Hopefully, this information proves useful to you!

Answer 2

If you want to set a background image for your website using CSS, one way to do it is by adding the background image as a CSS class for the <body> tag in your global styles.css file. Then, on the specific page or route where you want the background image to appear, you can add that class name to the <body> tag using either of these two options.

The first option is simple but not highly recommended:

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit(){
   this.document.body.classList.add('test');
}

The second option (my personal preference) involves implementing a custom rendering class from the @angular/core package:

import { Component, OnDestroy, Renderer2 } from '@angular/core';

export class myCoolComponent implements OnDestroy {

  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, 'test');
   }

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'test');
  }

Hopefully, this information proves useful to you!

How can I use Angular 7 to create a background image for a View made up of multiple components?

Answer №1

Similar questions

Adding a class to a field tag in a Django form: A step-by-step guide

Is the input field not properly centered on the page?

OAuth2 Authorization Code flow with client secret confidentiality protection

Notification fails to display following POST request

Retrieving a tag from bs4.element.tag results in an empty value

MUI: Interaction with a button inside a MenuItem when not interacted with MenuItem itself?

What is the best way to flip cards with the onClick event in JavaScript?

Guide to setting up a Datetime picker in Bootstrap 5 user interface

Encountering a compilation error while trying to utilize a union type in a function parameter within an

The naming convention for CSS classes could be defined as follows: .sa-list li a > div{

Retrieving addresses by extracting p from the Python class within a div

Python // Regular Expressions // Categories

Exclude mock files from webpack configuration in AngularClass/angular2-webpack-starter for production builds

A guide on incorporating dynamic formControlName functionality into AngularJs2

Setting the z-index to place an absolutely positioned element below a relatively positioned one

Converting FormBuilder object to a generic object

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions

What is the best way to eliminate the blue outline around an image map?

Tips for inserting a PHP array into an email communication

The appearance of the mock button varies between the development and production environments due to CSS styling