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

Question

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.

Franco Rondini · Accepted Answer · 2016-10-01 04:27:01Z

2

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'
})

export class SvgMapComponent {
   @Input('svgmap') value:number;
}
ngAfterContentInit() {
   // this.value is now with value set
   console.log(`SVGMapComponent ngAfterContentInit: level=${this.value}`);
   this.svgClass= `map map--${this.value}`; // example usage of the value
}
// arbitrary code here 
} // end of class

edited Oct 1, 2016 at 4:27

Franco Rondini

11k8 gold badges53 silver badges80 bronze badges

answered Sep 30, 2016 at 1:21

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Franco Rondini Over a year ago

@peeskilled thank you very much. I edit the answer because with the version of Angular 2 I'm using the specification of the type is mandatory and added some details that can be very useful, especially for those who have not complete mastery of Angular2

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related