Javascript Angular 4 Change ngClass from another Component

Question

I currently have this code in my app.component.ts

app.component.html

<div [ngClass]="myclass">
    ...rest of the content here
</div>

This I have the this:

<button (click)="changeClass('myFavClass')">Change Class to myFavClass</div>

app.component.ts

export class AppComponent {
  myclass: string;

  changeClass(myclass) {
    this.myclass = myclass;
  }

}

Now, all this works fine BUT I now want to put the triggering button on another component.

If I put this on another component:

<button (click)="changeClass('myFavClass')">Change Class to myFavClass</div>

How can I get it to change the class?

Answer 1

There are two ways you can do this you can use output with an EventEmit

Or you can set up a service that monitors the changes to a variable and use that as the control point for the change.

Personally, I use services for this instance as its easier to manage the code and its flow.

This answer has all the code in you need to look at.

Changing a value in two different components at the same time Angular 2

Hope that helps

Answer 2

There are at least two options. Subject and Observable or if this another component is a parent you can use @Input .

Subject and Observable method:

angular guide Highly recommended to read whole page.

Some component

export class SomeComponent {
   constructor(private ClassService: ClassService) {  }
   private changeClass(class) {
      this.ClassService.changeClass(class);
   }
}

Another Component

export class AnotherComponent implements OnInit, OnDestroy {
   constructor(private ClassService: ClassService) {  }
   private class: string = "";
   private subscribtion: Subscribtion;
   ngOnInit(): void {
      this.Subscribtion = this.ClassService.someClass$.subscribe(
         (class) => { this.class = class; }
      )
   }
   ngOnDestroy(): void {
      this.Subscribtion.unsubscribe();
   }
}

Service

@Injectable();
export class ClassService{
   constructor() {  }

   private someClassSource= new Subject<string>();

   someClass$= this.someClassSource.asObservable();

   changeClass(class) {
      this.someClassSource.next(class);
   }
}

taken from my answer

@Input method:

angular guide

This is very simple, when you click button changeClass method will change elClass which will be passed to another component by @Input decorator, every change of @Input will cause a detect changes which will detect that value has changed so class will change to myClass .

Parent component

parent.component.html
<another-component [elementClass]="elClass"></another-component>
<button (click)="changeClass('myClass')">change class<button>

parent.component.ts
export class ParentComponnet {
   private elClass: string = "";
   changeClass(class: string) {
      elClass = class;
   }
}

Another component (must be child component)

another.component.html
<div [ngClass]="elementClass">

another.component.ts
export class AnotherComponent {
   @Input() elementClass: string;
}

There is also Child to Parent interaction via @Output (emitting event) angular guide