Angular — Another Four Practical Tips to Build a Good Shared Component

Component is the basic building block of an Angular application. When working on a large application, it is very essential to have shared components for common features. Previously, I have written an article about Four Practical Tips to Build a Good Shared Component:

Angular — Four Practical Tips to Build a Good Shared Component

Here I am going to provide four more tips for better component quality.

Image from IFS

5. Destructure Object Inputs

Wrapping multiple arguments into an object is a practice in classic JavaScript. Yet, it is an anti-pattern for Angular component.

export interface Configuration {
  enableFilter: boolean;
  enableSort: boolean;
  ...
}
@Component({
  selector: 'custom-grid',
  ...
})
export class CustomGridComponent {
  @Input() configuration: Configuration;
...
}

The major issue is that it creates extra complexity and code to maintain. It also makes setting default value quite troublesome. Besides, it is inconvenient to use as developers have to…