Changing the Class of an Element in a Different Component with Angular 2+

Question

Changing the Class of an Element in a Different Component with Angular 2+

Currently in a project utilizing Angular 4, I have implemented two components: app.component and other.component

Within app.component.html, there exists a div with the name attribute myClass.

<div class="myClass"></div>

In the other.component.ts file, the following initialization is present:

ngOnInit() {

  jQuery('.myClass').removeClass();
  jQuery('.myClass').addClass('someClassName');

}

Seeking to find an alternative approach using Angular rather than relying on jQuery.

This prompts the question... How can this same functionality be achieved in Angular 2+?

javascript angular typescript

Answer 1

Answer №1

In case OtherComponent is located on a different route from AppComponent, you can utilize a service to handle this:

app.component.html

<div class="myClass" #concernedDiv></div>

app.component.ts

@ViewChild('concernedDiv') concernedDiv: ElementRef;

constructor(private myService; MyService) {}

ngOnInit() {
  this.myService.onOtherInit.subscribe(event => {
    this.concernedDiv.className = this.concernedDiv.replace('myClass', '').trim();
  });
}

my-service.service.ts

private sub: Subject<any> = new Subject();
public onOtherInit: Observable<any> = this.sub.asObservable();

emitEvent() { this.sub.next(/* any data */); }

other.component.ts

constructor(private myService: MyService) {}
ngOnInit() { this.myService.emitEvent(); }

Answer 2

In case OtherComponent is located on a different route from AppComponent, you can utilize a service to handle this:

app.component.html

<div class="myClass" #concernedDiv></div>

app.component.ts

@ViewChild('concernedDiv') concernedDiv: ElementRef;

constructor(private myService; MyService) {}

ngOnInit() {
  this.myService.onOtherInit.subscribe(event => {
    this.concernedDiv.className = this.concernedDiv.replace('myClass', '').trim();
  });
}

my-service.service.ts

private sub: Subject<any> = new Subject();
public onOtherInit: Observable<any> = this.sub.asObservable();

emitEvent() { this.sub.next(/* any data */); }

other.component.ts

constructor(private myService: MyService) {}
ngOnInit() { this.myService.emitEvent(); }

Answer 3

Answer №2

When utilizing ngClass, you have the ability to utilize conditions for adding or removing a class.

Within your component:

isClassVisible: boolean;

ngOnInit() {
    this.isClassVisible = true;
}

In your HTML template:

<div [ngClass]="{ 'someClassName': isClassVisible }"></div>

Answer 4

When utilizing ngClass, you have the ability to utilize conditions for adding or removing a class.

Within your component:

isClassVisible: boolean;

ngOnInit() {
    this.isClassVisible = true;
}

In your HTML template:

<div [ngClass]="{ 'someClassName': isClassVisible }"></div>

Changing the Class of an Element in a Different Component with Angular 2+

Answer №1

Answer №2

Similar questions

Change the behavior of a submit button to trigger a custom JavaScript function instead

Steps for embedding a custom function in a switch statement

Photoswipe using identical source code, yet the output is malfunctioning

React Redux Bundle with Hot Reload Feature

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Having Trouble Adding Details to a New Cart for a User in Angular and MongoDB - What's Going On?

Retrieve specialized information from a json file

What could be causing the image to vanish when combining a condition with 'linear-gradient' as the value for 'background-image'?

Limiting access to the Google API key so that it is only usable within specific areas of the application

Wrapping an anchor tag with a div in Codeigniter

Ways to determine the vertical size of a React component

When attempting to run HTML and JavaScript files locally, an error is encountered: "TypeError: The module name 'openai' is not resolving to a valid URL."

Using ValidationGroup to trigger JavaScript calls from controls

Retrieving information from an object using a randomly generated identifier

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

JavaScript For Each loops are really starting to frustrate me

In order to properly execute the JavaScript code, it is essential to create a highly customized HTML layout from the ER

Conundrum regarding setting up configuration for express-session middleware in Express version 4.x

Unable to establish connection with Uploadthing due to a timeout error

The .value property on the form group displays numeric values as either null or an empty string