Styles applied in the child component will have a cascading effect on the entire webpage

My webpage is divided into two parts: child1 and child2.

Page Hierarchy:


Parent
   Child1
   Child2

Here are the CSS styles included in the page:

Child1 -> z-index: 1
Child2 -> z-index: 2

What I want to achieve is to add a backdrop to the entire page when a button within child1 is clicked. The CSS for this is:

.backdrop {
    position: fixed;
    background-color: rgba(16,19,22,.6);
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Currently, this backdrop only covers the child1 component, but I need it to span across the entire page.

css angular angular7

Answer №1

EventEmitter

To work harmoniously with Angular's style encapsulation, it is recommended to emit an event to the parent component for handling the styling.

In the child component's script:

@Output() styleEvent = new EventEmitter();

onClick() {
  this.styleEvent.emit();
}

Child component template:

<button (click)="onClick()">Add Style</button>

In the parent component's script:

styleOn = false

handleStyleEvent() {
  this.styleOn = !this.styleOn
}

getStyle() {
  return this.styleOn ? 'backdrop' : ''
}

In the parent component's template:

<div [ngClass]="getStyle()">
  <app-one (styleEvent)="handleStyleEvent()"></app-one>
  <app-two></app-two>
</div>

You can include the necessary styles in your parent component stylesheet or styles.css for a global application of the styles.

Check out this example on Stackblitz.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Capacitor-enabled Ionic Audio Recording

Finally completed my chat app, but I am looking to enhance the voice messaging feature to be more in line with Messenger rather than a standard file.wav format. Any suggestions or ideas would be greatly appreciated! https://i.stack.imgur.com/soXZC.png Cu ...

android angular ionic-framework chat capacitor

Images in the JavaScript menu are not remaining fixed in place

Can someone help me with my website? I'm having trouble with the menu for different pages, it should stay gray for the active page. It was working fine before I switched to Wordpress, but now I'm not sure what the issue is. Could someone take a ...

javascript html css wordpress

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

css reactjs material-ui

An issue arises with the Angular 7 application specifically on Mac clients when the production release is deployed

I am facing an issue with my Angular 7 application developed in Visual Studio. The application utilizes Entity Framework for data access. Strangely, everything works perfectly when I connect a Windows laptop or a MacBook Air (using Chrome or Safari) to the ...

.net angular asp.net-core

What could be causing the divs to overlap? Without the use of floats or absolute positioning,

When resizing vertically on mobile, my date-time-container is overlapping the upper elements welcome and weather. Despite setting them as block level elements, adding clear: both, and not using absolute positioning or floats, the overlap issue persists. An ...

javascript html css position css-position

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

javascript html css

Angular 6 Encounter: "ReferenceError: alertify is not defined" - Alertify Error Detected

I recently attempted to integrate alertify.js into my project and followed a tutorial at . However, when I clicked a button in my application, I encountered an error that said ReferenceError: alertify is not defined. In order to add alertifyjs css and js ...

angular alertifyjs

Storing Json data in a variable within Angular 2: a step-by-step guide

https://i.sstatic.net/2QjkJ.png Within the params.value object, there are 3 arrays containing names that I need to extract and store in a variable. I attempted to use a ForEach loop for this purpose, but encountered an issue. Can you spot what's wron ...

javascript arrays angular typescript

The module does not contain 'toPromise' as an exported member in rxjs version 5.5.2

Encountering an error when using toPromise Prior method: import 'rxjs/add/operator/toPromise'; Updated approach: import { toPromise } from 'rxjs/operators'; The new way is causing the following issues: [ts] Module '"d:/.../ ...

angular typescript rxjs ionic3 observer-pattern

Encountered an issue while constructing Angular project: Error - EINVAL: invalid argument, mkdir

While attempting to compile my (outdated) Angular project, I encountered this error message Error: EINVAL: invalid argument, mkdir 'C:\Users\me\Documents\project\dist\C:\Users\me\Documents\project&bsol ...

node.js angular npm

Refreshing a page will disable dark mode

I'm in the process of implementing a dark mode for my website using the code below. However, I've encountered an issue where the dark mode resets when refreshing the page or navigating to a new page. I've heard about a feature called localst ...

javascript html jquery css

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

html css angular

The event handler cdkDropListDropped="drop($event)" is not triggering when interacting with a Material table that has a

Currently, I am working on implementing a column drag-and-drop feature using mat-table and cdkDragDrop in Angular (specifically with Angular 8). Here is the progress I have made so far: Within the component.html file: <mat-table cdkDropList cdkDrop ...

angular angular-cdk-drag-drop

Loading SVG templates dynamically in Angular can be done by utilizing a string

Is it possible to convert SVG content loaded from a server into a component template in Angular, with the ability to bind properties to it? For example, <tspan [attr.color]="textColor" ...>{{myText}}</tspan>. I have tried loading and ...

javascript angular templates svg

Angular 5 is throwing an error of TypeError: i28.ɵd is not a constructor

When I run the angular application in AOT mode using ng serve --aot, I encounter an error. It's important to note that there are no errors when building the application in AOT mode, but this error occurs in the browser when I access the application UR ...

angular angular5 angular-aot

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

css dom selenium css-selectors selenium-ide

Using AngularFire and Firebase to convert observable arrays

My tech stack includes angular CLI, angularFire, and Firebase. I store my data in a real-time database. https://i.sstatic.net/fEbhN.png I retrieve data from Firebase using an observable: //Service.ts import { Injectable } from '@angular/core' ...

arrays angular firebase angularfire2

Gallery Pagination using JQuery is not working properly

I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...

javascript html jquery css

What is the importance of having a reference path for compiling an AngularJS 2 project using gulp-typescript?

I wanted to modify the Angular Tour Of Heros project to utilize gulp from this Github Repository. This is the gulpfile.json file I came up with: const gulp = require('gulp'); const del = require('del'); const typescript = require(&apo ...

angular typescript gulp

The hover effect is not functioning properly after loading jQuery with load();

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements. It's a dynamic menu setup, as shown below: <div id='main-menu'> <ul> <li class='click ...

javascript jquery css

CSSer Q&A