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>