3

Is there a way, with Angular2, to call a component by a selector without this selector appears in the DOM ?

My problem is I want to make a game in Angular2 with SVG rendering. I have a match component (my main match container), who calls a field component (who draws the field). My match component is a SVG element, and the field is a SVG Rect element.

This is my match component :

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

@Component({
    selector: 'match',
    template: `
        <svg:svg width="800" height="600" style="background-color:purple;">
            <field></field>
        </svg:svg>
    `
})
export class MatchComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }
}

And my field component :

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

@Component({
    selector: 'field',
    template: `
        <svg:rect width="600" height="300" fill="yellow"></svg:rect>
    `
})
export class TerrainComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }

}

When I launch my solution, it's working but the SVG is not like I want causes there is a element in the DOM who breaks the SVG :

<match>
        <svg height="600" style="background-color:purple;" width="800">
            <field>
        <rect fill="yellow" height="300" width="600"></rect>
    </field>
        </svg>
    </match>

Do you know if it's possible to use selectors whitout have them in the result DOM ? Or is there a better way to generate SVG with Angular 2 ?


EDIT : I found a solution using SVG groups, but I don't think it's the best solution, I would prefer not have the selector tag in the DOM at all.

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

@Component({
    selector: 'match',
    template: `
        <svg:svg width="800" height="600" style="background-color:purple;">
            <g field></g>
        </svg:svg>
    `
})
export class MatchComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }
}

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

@Component({
    selector: 'g[field]',
    template: `
        <svg:rect width="600" height="300" fill="yellow"></svg:rect>
    `
})
export class TerrainComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }

}

It's rendering this SVG, who works :

<match>
        <svg height="600" style="background-color:purple;" width="800">
            <g field="">
        <rect fill="yellow" height="300" width="600"></rect>
    </g>
        </svg>
    </match>
AdrienTorris
  • 9,111
  • 9
  • 34
  • 52
  • For information, I already read this question and this answer but I can't apply the same solution https://stackoverflow.com/questions/38287224/angular-2-component-without-selector-tag-in-dom – AdrienTorris Jan 26 '17 at 12:29
  • I've also been trying to find out if this is possible with the framework. If you come across an answer please let everyone know. – Jessy Nov 21 '17 at 20:07

1 Answers1

0

You can solve this by using CSS only, just set match as display: contents,

    match {
        display: contents;
    }

As stated on display: contents documentation, this causes to appear as if the component were direct children of the element's parent.

luiscla27
  • 4,956
  • 37
  • 49