Creating Reusable Components in Angular

Lets start with a basic button

Here in the image we could see 3 different buttons with different names, different styling and with their names, it indicates they perform 3 different actions.

Instead of using button tag multiple times, one component can be created and that can be used for all the three by passing values dynamically which is nothing but Reusability.

Step 1 => Create a component and add a button tag

Step 2: Accessing the created component , which is void-button in this case, with its selector i.e.., app-void-button as shown in the image below

If inspected, here we can see the rendered component

Step 3: Sending text of a button dynamically. For that @Input decorator is used. This helps to pass data from parent component to child component.

Step 4: Passing text from parent component to child component using property binding

Step 5: Now, In order to render that text into the button, string interpolation is used as shown in the image below which is {{ btnName}}

Let's understand it better and notice the difference by passing different names for the same component

For the same component three different names has been passed.

Step 6: Adding styling dynamically in the similar way by which name has been binded using @input decorator. Passing as btnClass property from child component

Property binding for class with btnClass property in html

Step 7: Passing the class name in the parent component

Step 8: After rendering, if inspected, same component is reused three times from the picture below with different text and distinct class names

In this way, we can use the same component multiple times for all the most commonly used widgets like dropdowns, accordions, tables and many more by passing data dynamically.