Franco Rondini Franco Rondini - 2 months ago 13
TypeScript Question

How to pass data to nested (child) Angular 2 attribute component

According to http://blog.500tech.com/svg-in-angular-2/ to make inner components of SVG we must use an [attribute] selector:

// svgmap.componet.ts chunk of code: component declaration
@Component({
selector: '[svgmap]',
templateUrl: 'app/svg/map/svgmap.template.html'
})


In my scenario this
SVGMapComponent
is used in some parent component templates in this way:

<svg [attr.class]="mapClass[0]" svgmap="1"></svg>
<svg [attr.class]="mapClass[1]" svgmap="2"></svg>
<svg [attr.class]="mapClass[2]" svgmap="3"></svg>


So far it works fine but now I need to use the value I tried to pass as the svgmap attribute value (i.e. "1,2,3" in the above example ) into the code of
svgmap.componet.ts
but I don't know if it is possibile and how to grab it.

If it's possible: what's the syntax I can use in my typescript child component (i.e:
svgmap.componet.ts
) ?

If it's not possible: why ? it exists a work around?

P.S.: I read some posts such as
https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/ that enlightens in some cases but does not apply to the situation outlined above.

Answer

You would do it the same way as with a directive: use an @Input() with the same name as the selector

@Component({
  selector: '[svgmap]',
  templateUrl: 'app/svg/map/svgmap.template.html'
})
class SvgMapComponent {
  @Input('svgmap') value;
}