I need to be able to set CSS class for SVG element

Question

I am creating an app that includes an Angular2 directive that presents an SVG image containing path elements that when clicked emit events up to the app component. This is working well. However, I also want to be able to highlight the elements by changing their CSS class from a selector outside the directive.

As a simple example, I've 'wrapped' a simplified version of the AU map at http://www.petercollingridge.co.uk/sites/files/peter/Australia_compass_with_names.svg into a directive and added the code to add click events to the SVG elements as shown below:

import {Component, Renderer, ElementRef, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy} from '@angular/core';

@Component({
    selector: '[map]',
    template: `
    
`
})
export class Map implements OnInit, OnDestroy {
    @Input() public territory:string;
    @Output() territorySelected = new EventEmitter();
    private element:ElementRef;
    private ctx: any;

    listenFunc: Function;   
    globalListenFunc: Function;

    constructor(elementRef: ElementRef, renderer: Renderer) {

        this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        this.territorySelected.emit(event);
        });
    }
    ngOnInit() {
        console.log(this.ctx);
    }
    removeListeners() {
        this.listenFunc();
        this.globalListenFunc();
    }

    highlightTerritory(id: string)
    {
        console.log('highlighting territory ' + id);
        // need to understand how to access the elements in the SVG and update the CSS class to highlight the territory
    }
    public ngOnChanges(changes: {[propName: string]: any}) {        
        if (changes['territory']) {         
            this.highlightComponent(changes['territory'].currentValue);
        }
    }

    ngOnDestroy() {
        // Remove the listeners!
        this.listenFunc();
        this.globalListenFunc();
    }
}

I want to be able to allow the user to choose a territory from another sub-component of the app, such as a dropdown containing all the territories, and have that highlight the territory in the map in the same way that clicking it on the map would do. Coding the Input and capturing the change is simple enough. It's finding the associated SVG element and updating the fill colour that I'm struggling with.

Any assistance on the most appropriate way of achieving this in NG2 (using best practice!) would be gratefully received.

G&#252;nter Z&#246;chbauer · Accepted Answer

You can use

(click)="highlightTerritory('XXX')"

and

[class.className]="selected == 'XXX'"

to get the selected and update the class of the selected territory.

Plunker example

I didn't understand from your code what you need

@Output() territorySelected = new EventEmitter();

You can use it to bind changes to functions on your parent

but I couldn't see from your question if this is was the intention. If not then you don't need it (and also not ´this.territorySelected.emit(id);`)

I need to be able to set CSS class for SVG element

Answers (2)

Related Questions