Angular — Four old fashioned practices that you should NOT carry forward to Angular

Before the invention of modern JS frameworks, most websites were built with static HTML plus classic JS libraries, such as jQuery. Many practices have been formulated based on this stack, but some of them may no longer applicable with modern frameworks nowadays. Here I have summarized four classic web development practices that are not suitable anymore for Angular.

Image from Search Engine Land

1. Manipulating instances

Element selector plays an important role in classic web development. When we want to perform action on an element, we use the selector to get the corresponding instance and manipulate the instance directly. Selecting and manipulating instances is a common and the preferred way of doing things in classic websites. Yet, direct instance manipulation (with features like @ViewChild), such as calling a public component method, reading some component attributes, etc., is a less preferred approach in Angular. The reason is we cannot ensure the reactivity when doing such manipulations. For example:

@Component({
  selector: 'custom-button',
  ...
})
export class CustomButtonComponent {
  activated = false;
  public setActivated(value: boolean) {
    this.activated = value;
  }
}