Angular Q&A: What is a Dumb Component? And how do you create one?

In Angular, a "dumb" component is a component that is focused solely on presenting content, and does not have any logic or behavior of its own. Dumb components, also known as "presentational" or "stateless" components, are often used to break up a user interface into smaller, reusable pieces.

To create a dumb component in Angular, you can use the ng generate component command. For example, to create a component named ProductList you can use the following command:

ng generate component ProductList

This will create a new ProductList component in a product-list subdirectory within your Angular project's src/app directory. The component file will be pre-populated with some basic Angular boilerplate code, and will include a template file where you can add your component's HTML.

To render a dumb component in Angular, you can use the component's selector in the HTML template of another component. For example, if you have a parent component with a template file named parent.component.html, you can use the ProductList component's selector like this:

<app-product-list></app-product-list>

This will render the ProductList component within the parent component's template. You can then pass data to the ProductList component using inputs, and listen for events emitted by the ProductList component using outputs.

💡
Want to sponsor matcha.fyi? You can have your brand featured right here. Let's connect and chat about it.