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

Converting JSON to a list using JavaScript

The project runs smoothly on my local host, but encounters an issue during the build process

Prevent postback when clicking on an image button in ASP

Using ThreeJS to Load a Texture from an ArrayBuffer in JavaScript

The type string[] cannot be assigned to type 'IntrinsicAttributes & string[]'

Why does the server attempt to load the chart in Angular 10 Universal using Amcharts 4?

Unable to delete product from shopping cart within React Redux reducer

Attempting to implement an EventListener to alter the navbar upon scrolling, unsuccessful at the moment

"Every time you run mat sort, it works flawlessly once before encountering an

Choose to conceal beneath the table within Bootstrap 4

Is there a way for me to generate a preview thumbnail for my video?

Update my React shopping cart with fresh items

What is the process for extracting content from CSS comments or annotations in a stylesheet?

Arranging the columns of a matrix

Is it possible to modify a specific index within an array stored in Firestore?

What is the outcome of XmlHttpRequest.responseText?

When an object is created, what is the most effective way to manage the asynchronous setup of one of its properties?

Is there a way to retrieve data from a servlet using jQuery without having to make a request?

View the edited image preview instantly upon selecting the image

Increase value continuously when button is pressed down using Material UI