A deep dive into Angular Inputs

Photo by Francesco Ungaro from Pexels

At the beginning of the creation of the Angular framework, the angular team made a great choice by going with the component pattern. Based on what is going on in the JavaScript world this a direction all the big players are taking (Vue, React, Svelte). The component seems to perfectly fit the nature of HTML itself. This global movement caused components to be the focal point of the angular framework and that is why they are one of the most complex features of it. You can easily say they are the backbone of every application. In this article, I would like to take a closer look at the components mentioned and focus on the methods of communication between them.

Methods of communication

There are a couple of ways of communicating between components in the angular framework. Either you can do it with: services, template variables, referencing with queries like @ViewChild() or @ContentChild(), you can even inject a parent component into a child one using the dependency injection mechanism. But the one method which I haven’t mention and which is also the most commonly used one is @Input().

@Component({
  selector: 'basic',
  template: `...`
})
class Component {
  
  @Input()
  value: string;
}

It’s a very easy technique to use, all you need to do is mark property with the…