Angular Q&A: How do you pass state to dumb components via @Input?

In Angular, you can use the @Input decorator to pass state from a parent component to a "dumb" or "presentational" child component. The @Input decorator binds a property of the child component to a value that is passed in from the parent.

To pass state to a dumb component via @Input, you first need to import the Input symbol from the Angular core library and decorate the property that you want to bind to with the @Input decorator. For example, here is how you might use the @Input decorator to bind a property named products to a list of products that is passed in from the parent component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {

  @Input() products: Product[];

}

In the parent component's template, you can then use the [products] syntax to pass the list of products to the ProductList component as an input. For example, if you have a parent component with a products property that contains a list of products, you could use the ProductList component like this:

<app-product-list [products]="products"></app-product-list>

This will bind the products property of the ProductList component to the value of the products property in the parent component. The ProductList component can then use this data to render the list of products in its template.