Angular component creation best practices-CodePudding

I'm often in doubt when I want a new behaviour of a component.

Let's make a simple example, I have <app-title> component:

<div>
    <h1>{{title}}</h1>
</div>

Some time after, inside another page I need to put a button alongside the title. The problem is, should I create a new title component or should I parametrize the existing one?

I can edit <app-title> to look like this:

export class AppTitleComponent implements OnInit {

  @Input() showButton: boolean;

  title = 'App title';
  
  constructor() {}
  
  ngOnInit() {}
}

<div>
  <h1>{{title}}</h1>
  <button *ngIf="showButton">{{buttonTitle}}</button>
</div>

This is a simple example and may be obvious but using Angular I always have this problem, think about complex components: the @Input() would become many using this method, but creating a new component would increase files and complexity.

From this example you could say to create two components, one for title and another for button but that's only because this is a very simple case. Think about changing a component from "compact" mode to "expanded" and viceversa. On the one hand you may need to have the large component and on the other hand have it smaller in size and showing less information

Is there some guideline about this?

Thanks

CodePudding user response：

I think it's important thinking about behavior within the context of your component. Is the button core to behavior of the title component? Does it make sense to not only display the button, but also handle its events within the context of the title component? If the answer is no, then at some granular level I'd split the components.

Here are some other things you can consider:

Anticipating that your title component may need some content wrapped with the title, you can use transclusion:

<div>
    <h1>{{title}}</h1>
    <ng-content></ng-content>
</div>

Then, in the parent, you'd do something like this:

<div>
  <app-title-component title='title'>
    <button>Some Button Text</button>
  </app-title-component>
</div>

You could write a wrapper component that packages the title and the button together... ie:

<div>
  <app-title-component></app-title-component>
  <button>Some Button Text</button>
</div>

You could, as suggested, parameterize the configuration. I recommend thinking about if the behavior that you are parameterizing is part of the core behavior of the component. For example, if you want to paramaterize whether or not a legend shows on a chart, that makes sense because the legend is a core feature of the chart. But I probably wouldn't parameterize whether or not the chart should be followed by a raw data sheet. Instead I would create a new component for that and render them in sequence, because the data sheet is not part of the core behavior of the chart, even though sometimes I'd want to put them next to each other.

At the end of the day, you have to think about the decision in terms of your app, your app's future usability, and developer ease (e.g.- will it make sense to a future developer that this button is packaged with title).

I hope you find this helpful.