Components, Metadata and Data Binding
Getting in depth of Angular
Components
- Components are the atomic building block of Angular applications.
- Inside the components there are two types of separate things that are happening conceptually.
- Those two things are template and class.
Component Classes
- Components are just ES6 classes.
- Properties and method of the component class are available to the template.
- Providers (Services) are injected in the constructor.
- The component lifecycle is exposed with hooks. Read this Life Cycle of Angular Components
Templates
- A template is HTML that tells Angular how to render a component
- Templates include data bindings as well as other components and directives
- Angular leverages native DOM events and properties which dramatically reduces the need for ton of built-in directives.
- Angular leverages shadow DOM to do some really interesting things with view encapsulation.
Metadata
How does the template and the class know each other?
- This is basically done via metadata
- Metadata allows Angular to process a class
- We can attach metadata using TS using decorators
- Decorators are just functions
- Most common decorator is @Component() decorator.
- Take a config option with the selector, templateUrl, styles, styleUrls, animations etc.
Data Binding
Now here we gets one more question, How class and template talks?
- Enables data to flow from the component to template and vice-versa.
- Includes interpolation, property binding, event binding, and two-way binding (property binding and event binding combined)
- The binding syntax with angular has expanded a little bit, but due to this expansion we were able to create more meaningful bindings while reducing the API of the framework itself.
- So we can think of this simply as class is passing properties to templates via Property Binding and whatever changes happens gets passed by Template to Class via Event Binding.
Directive
- Component is basically a directive with template.
- So if you need to do something that has functionality, but it doesn’t require template, rather it needs to just act on a pre-existing element on the page.
- Basically components extends directives.
- Above code is taken from angular/core directory.
Is it good practice to programmatically render a component in Angular?
- Until Angular 13 it was really very hard to do that.
- One of the easy thing to do in 1.x was to dynamically render a component on the DOM.
- With Angular 13 we can do it programmatically.
- So we can say, in most cases we don’t need to programmatically render your components in terms of dynamically attaching them to DOM.
- More often we can simply attach the component into template and it will be good to go.
With all this, let’s end this blog as this is it of Components, Metadata and Data Binding. If you will find any issue regarding concept or code, you can message me on my Twitter or LinkedIn. The next blog will be published on 09 March 2023.
Some words about me
I’m Mohit.❤️ You can also call me Chessman. I’m a Machine learning Developer and a competitive programmer. Most of my time is spent staring at a computer screen. During the day, I am usually programming, working to derive insight from large datasets. My skills include Data Analysis, Data Visualization, Machine learning, Deep Learning, DevOps and working toward Full Stack. I have developed a strong acumen for problem-solving, and I enjoy occasional challenges.
