Can we use a switch statement instead of having multiple @Input()s in Angular?

Question

Can we use a switch statement instead of having multiple @Input()s in Angular?

When passing an attribute into my Angular component like this:

<my-component myAttribute></my-component>

I aim to modify a variable within the component that controls the CSS properties for width and height.

To simplify, I have predefined attribute values set up where using:

<my-component large>

Will automatically adjust the width and height variables to be 100 (resulting in 100px).

However, I am exploring the possibility of creating multiple criteria using @Input() without having numerous separate entries. Instead, could I potentially utilize a switch statement to achieve the same outcome?

I have made some attempts at implementing this approach, but all I see are red squiggly lines under the code.

My Inputs:

size = 50 // Default value

  @Input('small') set small(value) {
    this.size = !value ? 25 : this.size;
  }

  @Input('medium') set medium(value) {
    this.size = !value ? 50 : this.size;
  }

  @Input('large') set large(value) {
    this.size = !value ? 100 : this.size;
  }

  @Input('x-large') set xlarge(value) {
    this.size = !value ? 200 : this.size;
  }

javascript angular typescript

Answer 1

Answer №1

There's a unique approach to solving this issue that may be considered unconventional. I am capable of executing it, but I cannot advise you on whether or not it should be used. Proceed with caution if you choose to explore this method.

This particular technique (accessible here for demonstration) eliminates the need for inputs and instead utilizes the root element of your component:

export class HelloComponent {
  size = '120';

  attributes = {
    'x-small': 50,
    'small': 75,
    'medium': 100,
    'large': 125,
    'x-large': 150,
  };

  constructor(
    private el: ElementRef<HTMLElement>
  ) { }

  ngOnInit() {
    this.setSize();
  }

  private setSize() {
    const attr = Object.keys(this.attributes).forEach(attr => {
      const hasAttribute = this.el.nativeElement.hasAttribute(attr);
      this.size = hasAttribute && this.attributes[attr] || this.size;
    });
  }

  getSize() {
    const myStyle = {
      width: this.size + 'px',
      height: this.size + 'px'
    };
    return myStyle;
  }

}

The functionality it provides involves searching for an attribute within the pre-defined attributes object and setting the corresponding value if found.

UPDATE When creating private functions, their scope is limited to the component itself, reducing potential external impacts and testing requirements.

For example, you can evaluate the size as follows:

it('should be 100px wide when setSize', () => {
  component['el'].nativeElement.setAttribute('medium', '');
  component.setSize();
  expect(component.size).toEqual(100);
});

This concept is known as an implementation detail, emphasizing the importance of testing the behavior rather than the internal workings of the function.

It is crucial to test all scenarios to prevent unintended consequences, such as handling cases where the attribute is not 'medium' but 'exxxtra-large'.

Adhering to this practice should streamline your testing process!

Answer 2

There's a unique approach to solving this issue that may be considered unconventional. I am capable of executing it, but I cannot advise you on whether or not it should be used. Proceed with caution if you choose to explore this method.

This particular technique (accessible here for demonstration) eliminates the need for inputs and instead utilizes the root element of your component:

export class HelloComponent {
  size = '120';

  attributes = {
    'x-small': 50,
    'small': 75,
    'medium': 100,
    'large': 125,
    'x-large': 150,
  };

  constructor(
    private el: ElementRef<HTMLElement>
  ) { }

  ngOnInit() {
    this.setSize();
  }

  private setSize() {
    const attr = Object.keys(this.attributes).forEach(attr => {
      const hasAttribute = this.el.nativeElement.hasAttribute(attr);
      this.size = hasAttribute && this.attributes[attr] || this.size;
    });
  }

  getSize() {
    const myStyle = {
      width: this.size + 'px',
      height: this.size + 'px'
    };
    return myStyle;
  }

}

The functionality it provides involves searching for an attribute within the pre-defined attributes object and setting the corresponding value if found.

UPDATE When creating private functions, their scope is limited to the component itself, reducing potential external impacts and testing requirements.

For example, you can evaluate the size as follows:

it('should be 100px wide when setSize', () => {
  component['el'].nativeElement.setAttribute('medium', '');
  component.setSize();
  expect(component.size).toEqual(100);
});

This concept is known as an implementation detail, emphasizing the importance of testing the behavior rather than the internal workings of the function.

It is crucial to test all scenarios to prevent unintended consequences, such as handling cases where the attribute is not 'medium' but 'exxxtra-large'.

Adhering to this practice should streamline your testing process!

Answer 3

Answer №2

Instead of passing a number, consider passing the input as an object. This way, you can capture the value passed by using either:

a setter method (similar to your current approach) OR

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

ngOnChanges

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-ngonchanges

If you choose to use a setter and assuming dimensions is an object being passed in, your code may look something like this:

private _width = 0;
private _height = 0;

@Input()
set dimensions(dimensions: any) {
  this._width = dimensions.width
  this._height = dimensions.height
  // You could add a switch case here
}

get width(): string { return this._width; }
get height(): string { return this._height; }

Answer 4

Instead of passing a number, consider passing the input as an object. This way, you can capture the value passed by using either:

a setter method (similar to your current approach) OR

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

ngOnChanges

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-ngonchanges

If you choose to use a setter and assuming dimensions is an object being passed in, your code may look something like this:

private _width = 0;
private _height = 0;

@Input()
set dimensions(dimensions: any) {
  this._width = dimensions.width
  this._height = dimensions.height
  // You could add a switch case here
}

get width(): string { return this._width; }
get height(): string { return this._height; }

Answer 5

Answer №3

To efficiently manage the size of a child component within the parent component, you can control it and calculate it then send an object with various properties. The value can be retrieved through a single input named size.

Parent Component

<my-component size="this.childSize"></my-component>

Child Component

private _size: any;

@Input('size') set size(value) {
  this._size = value;

  const property = Object.keys(this.size)[0]; // expecting only 1 property

    switch (property):
      case 'small':
        // do something
        console.log(this.size[property]);
        break;
      case 'large':
        // do something
        break;
      default:
        // do something
}

public get size(): any {
  return this._size;
}

It is recommended to define your own type for childSize to specify and limit the possible properties. For example, objects may include:

{
  small: 15
}

{
  large: 35
}

Answer 6

To efficiently manage the size of a child component within the parent component, you can control it and calculate it then send an object with various properties. The value can be retrieved through a single input named size.

Parent Component

<my-component size="this.childSize"></my-component>

Child Component

private _size: any;

@Input('size') set size(value) {
  this._size = value;

  const property = Object.keys(this.size)[0]; // expecting only 1 property

    switch (property):
      case 'small':
        // do something
        console.log(this.size[property]);
        break;
      case 'large':
        // do something
        break;
      default:
        // do something
}

public get size(): any {
  return this._size;
}

It is recommended to define your own type for childSize to specify and limit the possible properties. For example, objects may include:

{
  small: 15
}

{
  large: 35
}

Can we use a switch statement instead of having multiple @Input()s in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

Challenges with Initializing Angular 2 Router

Running the JavaScript code on a webpage using Selenium WebDriver

Moving Rows Between AgGrids

How can we improve our handling of cyclic requires and EventEmitter in our code?

JQuery email validation failing to function

Navigating pages with Jqueryor Using J

Issue with jQuery select box (roblaplaca) and its custom scroll bar functionality not functioning as expected

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

Customized link routing / Deep linking

Drop and drag to complete the missing pieces

Problem with flags series in Highcharts/Highstock

Identifying one of the two possible return types automatically

The scroll function is executed only one time

The Node.js EventEmitter encounters an error stating `listener must be a function` when the `typeof` operator indicates that the value is a function, hint

Having trouble retrieving spot price using Uniswap SDK due to a transaction error LOK

Having trouble getting Node.js to run Express.js and React.js simultaneously

Utilize web workers for efficient processing of a limited number of files simultaneously in JavaScript

moment.js incorrectly interprets the month as the day instead of the actual day

Declaring and accessing class variables in Angular 4

Is the functionality of this.value compatible with Firefox but not with Internet Explorer?