Tips for sending information to a nested Angular 2 attribute component

Question

Tips for sending information to a nested Angular 2 attribute component

As per the instructions found on this blog, in order to create inner components within an SVG using Angular 2, we need to utilize an [attribute] selector:

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

In my current setup, the SVGMapComponent is implemented in various parent component templates like so:

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

While this functions well up to this point, I now find myself needing to access the value passed as the svgmap attribute (e.g. "1,2,3" in the aforementioned example) within the code of svgmap.component.ts, but I am unsure if this is achievable or how to go about it.

If extraction is possible, what syntax should be utilized within my TypeScript child component (i.e. svgmap.component.ts)? If extraction is not feasible, what limitations are preventing it? Is there a workaround available?

P.S.: After exploring resources like this post, while insightful in certain scenarios, it does not directly address the specific situation described above.

angular typescript parameter-passing

Answer 1

Answer №1

To accomplish this, you can follow the same approach as using a directive: simply utilize an @Input() with matching selector name

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

export class SvgMapComponent {
   @Input('svgmap') data:number;
}
ngAfterContentInit() {
   // The value of data is now set
   console.log(`SvgMapComponent ngAfterContentInit: level=${this.data}`);
   this.svgClass= `map map--${this.data}`; // An example showing how to use the value
}
// Additional code can be placed here 
} // end of class

Answer 2

To accomplish this, you can follow the same approach as using a directive: simply utilize an @Input() with matching selector name

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

export class SvgMapComponent {
   @Input('svgmap') data:number;
}
ngAfterContentInit() {
   // The value of data is now set
   console.log(`SvgMapComponent ngAfterContentInit: level=${this.data}`);
   this.svgClass= `map map--${this.data}`; // An example showing how to use the value
}
// Additional code can be placed here 
} // end of class

Tips for sending information to a nested Angular 2 attribute component

Answer №1

Similar questions

When null is assigned to a type in Typescript, it does not result in an error being triggered

Is there a way to denote a specific part of a generic type without explicitly specifying the parts as generics themselves?

Access the array values by their respective keys in an object that is returned from a custom JavaScript file utilizing the Node.js file system

Encountering an error with "unexpected token import" while utilizing localize-router in an Angular 4

The type 'undefined' cannot be assigned to type 'CartItem'

Even after setting the handler to return false, Angular continues to submit the form

Receiving an error when triggering an onclick event for a checkbox in TypeScript

What is the reason behind the return type of 'MyType | undefined' for Array<MyType>.find(...) method?

Uploading images using the power of Angular and Node.js

Combine all the missing observables in RxJS into a single array

Make sure to confirm that 'tables-basic' is an Angular component within the module before proceeding

Tips for adjusting the material ui Popper width to fit the container without disabling the portal

Running multiple versions of the Angular CLI on one machine

Examining interconnected services' dependencies

Master the Art of Scrolling Lists in Ionic 2

Is ngOnDestroy in Angular 2 triggered on page refresh, or only when navigating away from the component?

Defining the structure of an object using a type interface

<T extends object>(value: T): T, but with the type changing from null to string

I am looking to generate an array with key-value pairs from an object that will be seen in the examination

Retrieving the value from the series object and showing it in the tooltip of a high chart with the help of Angular 4