Javascript Angular 4 eventEmitter avec ngClass

Question

J'utilise Angular 4 et eventEmitter pour changer un nom de classe.

La classe est css:

.paintRed { 
    background-color: red; 
} 

Maintenant, pour la partie angulaire:

J'ai un composant de bouton:

button.compoment.ts:

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-button', 
    templateUrl: './button.component.html', 
    styleUrls: ['./button.component.scss'] 
}) 
export class ButtonComponent implements OnInit { 

    @Output() outputEvent: EventEmitter<any> = new EventEmitter(); 

    constructor() { } 

    ngOnInit() {} 

    sendOutEvent() { 
    this.outputEvent.emit('paintRed'); 
    } 

} 

bouton

.component.html

<p (click)="sendOutEvent()">Click to Emit</p> 

Enfin mes app.component.ts je:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app'; 

    handleEvent(value) { 
    console.log(value); 
    document.getElementById('elementId').classList.add(value); 

    } 

} 

et mon app.component.html ressemble à ceci:

<div id="elementId"> 

    <app-button (outputEvent)="handleEvent($event)"></app-button> 

</div> 

ci-dessus ajoutera avec succès la classe « paintRed "à elementid mais ce que je veux faire est la suivante:

<div ngClass="myClass"> 

    <app-button (outputEvent)="handleEvent($event)"></app-button> 

</div> 

Fondamentalement, je veux utiliser ngClass changer la v alue envoyé par handleEvent ($ event) ...

Comment puis-je faire cela?

Answer 1

Dans votre app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app'; 
    myClass = ''; 

    handleEvent(value) { 
    console.log(value); 
    myClass = value; 
    } 
} 

Et votre code html:

<div [ngClass]="myClass"> 

    <app-button (outputEvent)="handleEvent($event)"></app-button> 

</div>