How to respond to input changes reactively in the child component

Mini Bhati — Mon, 15 Aug 2022 06:15:59 +0000

Component interaction can work in one of the following three ways:

ngOnChanges() lifecycle hooks
Setters on the @Input() property
Services

If your component is a presentational component and interacts only with the @Input() and @Output() properties, then using **setters is the most reactive way **of interacting with the child component

Let's understand how!

Parent Child Component Interaction

Parent component passes value to the child component with the following syntax where userValue is an @Input() property in the child component

<child-component [userValue]="userValue"></child-component>

export class ChildComponent {
  @Input() userValue;
}

Setters on the `@Input()` property

Setters on the @Input() property runs some additional logic whenever the input changes.
So, instead of defining userValue, we define a function on the userValue property which executes whenever input changes.

export class ChildComponent {
  status = false;
  @Input() set userValue(value: string) {
      this.status = true;
  }
}

These are called property accessor methods which executes on setting/getting values. Add a set keyword before a property to make a setter.

Thanks for reading!

Please feel free to reach out on Twitter or LinkedIn

List of Angular CLI commands we use daily

Mini Bhati — Fri, 07 Jan 2022 12:20:10 +0000

In this post, I am consolidating all the commonly used Angular CLI commands which every Angular developer uses frequently.

Create a NEW angular project

ng new <project-name>

ng n <project-name>

Add NPM packages

ng add <npm-package>

Run the Angular project

The application is run on port 4200 by default. You can specify the port in the following command using --port flag.

ng serve

Generate new Schematics

Schematics can be directives, components, pipes, modules, guards etc

ng generate <schematic-name> <sample-name>

Build the Angular app

Compiles the application under the output directory named /dist

ng build

Run Unit tests in the app

ng test

And, that's it for today. Would you like to add anything else to the list?

DEV Community: Mini Bhati